javascript - React Router 不显示组件

标签 javascript html css reactjs react-router

我已经学习 reactjs 几个星期了，我想创建一个小型博客类型的网站。所以我的应用程序存在一些问题。

  1. 首先，我希望非事件侧边栏按钮看起来与白色完全融合，字体颜色为黑色，并且只有在单击并处于事件状态时才具有插入框阴影。

  2. 与主容器导航面板相同，其中 ALL 和 Shared with Me 应为灰色，但在单击时变为黑色且字体大小变大，但在单击时不执行任何操作。

  3. 第三个是，当我在导航面板中单击“发布”时，它应该显示问候按钮，当我单击“全部”按钮时，它应该只在主区域显示问候，但它不是默认情况下显示问候按钮和问候文本都无法正常工作，但我想在单击“全部”按钮时显示问候文本。不确定这是 react-router 的问题还是其他问题。我知道如何仅在单击时显示组件，但我忘记了，因为我没有足够的练习或写下来，我现在快疯了。如果有人能指出正确的方向，我将不胜感激。

我已将演示放在代码沙箱中 https://codesandbox.io/s/sweet-feynman-2tvy5

App.js

import React, { Component } from "react";
import "./App.css";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import NavBarPage from "./nav";
import "@fortawesome/fontawesome-free/css/all.min.css";
import Home from "./Home";
import About from "./About";
import NoMatch from "./NoMatch";
import Layout from "./component/Layout";
// import "bootstrap/dist/css/bootstrap.min.css";
import LeftBox from "./component/leftBox";
import SecTab from "./component/secTab";
class App extends Component {
  render() {
    return (
      <Router>
        <>
          <NavBarPage />
          {/* <hr /> */}
          {/* <LeftBox /> */}
          <Layout>
            <Switch>
              <Route exact path="/" component={Home} />
              <Route path="/about" component={About} />
              <Route path="/secTab" component={SecTab} />
              <Route Component={NoMatch} />
            </Switch>
          </Layout>
        </>
      </Router>
    );
  }
}
export default App;

leftBox.js(左侧边栏)

import React, { Component } from "react";
import { BrowserRouter as Router, Route, Switch, Link } from "react-router-dom";

import { Nav, Button } from "react-bootstrap";

import "../App.css";
export default class LeftBox extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <>
        <div className="nav">
          <ul>
            <li className="list-item">
              <Link to="/about">
                <input
                  type="button"
                  className="sideButton sideBarText"
                  value="Dashboard"
                />
              </Link>
            </li>
            <li className="list-item">
              <Link to="/">
                <input
                  type="button"
                  className="sideButton2 sideBarText2"
                  value="People"
                />
              </Link>
            </li>
          </ul>
        </div>
      </>
    );
  }
}

textBox.js(主区域导航面板)

import React, { Component } from "react";
import WriteSec from "./writeSec";
import SecTab from "./secTab";
import { BrowserRouter as Link } from "react-router-dom";

class TextBox extends Component {
  render() {
    return (
      <div>
        <div class="container" id="dashboardpills">
          <br />

          <ul class="nav nav-pills" role="tablist">
            <li class="nav-item">
              <span class="active mainCom" id="hometab" data-target="#home">
                POSTS
              </span>
              <WriteSec />
            </li>
            <li class="nav-item">
              <span
                id="sharedwithmetab"
                class="nav-link mainComS2"
                data-toggle="pill"
                data-target="#menu2"
              >
                <Link to="/secTab">All</Link>
              </span>
              <SecTab />
            </li>
            <li class="nav-item">
              <span
                id="sharedwithmetab"
                class="nav-link mainComS"
                data-toggle="pill"
                data-target="#menu2"
              >
                SHARED WITH ME
              </span>
            </li>
          </ul>
        </div>
      </div>
    );
  }
}

export default TextBox;

布局.js

import React, { Component } from "react";
import { Container, Row, Col } from "react-bootstrap";
import LeftBox from "./leftBox";
import "../App.css";
import TextBox from "./textBox";
class Layout extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <Container className="conMain">
        <Row>
          <Col xs={3} className="leftMain">
            <LeftBox />
          </Col>
          <Col xs={9} className="rightMain">
            <TextBox />
          </Col>
        </Row>
      </Container>
    );
  }
}
export default Layout;

应用.css

.leftMain {
  display: flex;
  flex-direction: row;
  padding-top: 40px;
}
.rightMain {
  display: flex;
  padding-top: 20px;
}
ul {
  list-style: none;
}
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.7rem 2rem;
  overflow: hidden;
  z-index: 1;
  width: 88.15%;
  margin: auto;
  top: 0;
  border-bottom: solid 1px var(--primary-color);
  opacity: 0.9;
  position: static;
  top: 0;
  box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8),
    -12px 0 8px -4px rgba(31, 73, 125, 0.8);
  box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white,
    12px 0 15px -4px rgba(31, 73, 125, 0.8),
    -12px 0 15px -4px rgba(31, 73, 125, 0.8);
}

.navbar ul {
  display: flex;
}
.navbar a {
  color: #2076d9;
  padding: 0.45rem;
  margin: 0 0.25rem;
}

.navbar a:hover {
  color: var(--primary-color);
}

.navbar .welcome span {
  margin-right: 0.6rem;
}
/* dashButton {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
dashButton::after {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
} */

@media (min-width: 768px) #dashboardpills .nav-item .nav-link {
  max-height: 42px;
  opacity: 0.25;
  color: #000;
  font-family: Poppins;
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
a:not([href]):not([tabindex]) {
  color: inherit;
  text-decoration: none;
}
.nav-pills .nav-link {
  border-radius: 0.25rem;
}
.nav-link {
  display: block;
  padding: 0.5rem 1rem;
}
a {
  color: #007bff;
  text-decoration: none;
  background-color: transparent;
}
*,
::after,
::before {
  box-sizing: border-box;
}
user agent stylesheet li {
  text-align: -webkit-match-parent;
}
.nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.sideButton {
  width: 200px;
  height: 50px;
  padding-left: 0px;
  margin-left: 0px;
  padding: 0;
  border: none;
  font: inherit;
  color: inherit;
  border-radius: 0 10px 10px 0;
  background-color: rgba(191, 191, 191, 0.14);
  box-shadow: inset 0 1px 10px 0 rgba(0, 0, 0, 0.15);
  position: absolute;
  left: 0;
  right: 0;
  cursor: pointer;
  -webkit-box-shadow: inset 0px -1px 28px -1px rgba(0, 0, 0, 0.17);
  -moz-box-shadow: inset 0px -1px 28px -1px rgba(0, 0, 0, 0.17);
  box-shadow: inset 0px -1px 28px -1px rgba(0, 0, 0, 0.1);
}
.sideButton:active {
  background-color: #007bff;
}
.sideButton:selected {
  background-color: #007bff;
}

.sideButton2 {
  width: 200px;
  height: 50px;
  padding-left: 0px;
  margin-left: 0px;
  margin-top: 55px;
  padding: 0;
  border: none;
  font: inherit;
  color: inherit;
  border-radius: 0 10px 10px 0;
  background-color: white;
  box-shadow: inset 0 1px 10px 0 rgba(0, 0, 0, 0.15);
  position: absolute;
  left: 0;
  right: 0;
  cursor: pointer;
  -webkit-box-shadow: inset 0px -1px 28px -1px rgba(0, 0, 0, 0.17);
  -moz-box-shadow: inset 0px -1px 28px -1px rgba(0, 0, 0, 0.17);
  box-shadow: inset 0px -1px 28px -1px rgba(0, 0, 0, 0.1);
}
.sideButton2:active:after {
  background-color: rgba(191, 191, 191, 0.14);
}
.titleName {
  font-family: Poppins;
}

.sideBarText {
  color: #000;
  font-family: Poppins;
  font-size: 18px;
  font-weight: 600;
  line-height: 25px;
}
.sideBarText2 {
  color: #000;
  font-family: Poppins;
  font-size: 18px;
  font-weight: 600;
  line-height: 25px;
}

.createNew {
  height: 40px;
  width: 153px;
  border: 0px;
  border-radius: 10px;

  background-image: linear-gradient(
    to top,
    #d83f91,
    #d0409b,
    #c743a5,
    #bb47af,
    #ae4bb8
  );
  box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.25);
}
.signOut {
  border: 0px;
  height: 40px;
  width: 100px;
  border-radius: 10px;
  background-image: linear-gradient(
    to right,
    #eb3941,
    #f15e64,
    #e14e53,
    #e2373f
  );
  box-shadow: 0 5px 15px rgba(242, 97, 103, 0.4);
  box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.25);
}

.mainCom {
  height: 56px;
  width: 68px;
  color: #000;
  font-family: Poppins;
  font-size: 40px;
  font-weight: 700;
  line-height: 56px;
  left: 0;
  cursor: pointer;
}
.mainComS {
  height: 42px;
  width: 255px;
  opacity: 0.25;
  color: #000;
  font-family: Poppins;
  font-size: 24px;
  font-weight: 700;
  line-height: 42px;
  cursor: pointer;
}
.mainComS2 {
  height: 42px;
  width: 200px;
  opacity: 0.25;
  color: #000;
  font-family: Poppins;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  line-height: 42px;
  cursor: pointer;
}
.conMain {
  height: 100vh;
  width: 100%;
  box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8),
    -12px 0 8px -4px rgba(31, 73, 125, 0.8);
  box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white,
    12px 0 15px -4px rgba(31, 73, 125, 0.8),
    -12px 0 15px -4px rgba(31, 73, 125, 0.8);
}

ul {
  list-style: none;
}

li:hover {
  cursor: pointer;
}

最佳答案

对于 React dom 版本 6，我使用 element 而不是 component 并且它对我有用。 这里不用提exact。

例如:

<Routes>
    <Route path="/" element={<Home />}/>
    <Route path="/add-course" element={<Addcourse/>} exact />
    <Route path="/view-courses" element={<Allcourses/>} exact />
</Routes>

关于javascript - React Router 不显示组件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58057235/

上一篇：html - 卡住表中的第一列，并在标题行设置为换行空白处保持一致的高度？

下一篇：css - 我可以在不对每个行元素应用样式的情况下隐藏网格行吗？

相关文章：

javascript - 带有点击事件的菜单按钮在第三次点击时停止

css - HTML5 将图像放在屏幕上我想要的位置

javascript - Angular 4 vs React 性能——理论与现实

javascript - Chart.js - 如何在折线图上的 X 轴上制作比例间隔

javascript - Active 类添加到菜单中的错误文档对象

javascript - 使列和行中的所有按钮大小相同？

javascript - JS RegExp 表达式并集

javascript - 在 Node 中将循环转换为异步

javascript - onLoad 滚动直到 div 居中

html - fa 图标不能与#tag_selector * {_CSS_} 一起使用

©2024 IT工具网  联系我们