Javascript 反应路由器不显示组件

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

首先，我希望非活动侧边栏按钮看起来完全与白色合并，字体颜色变为黑色，并且只有在单击并激活时才具有插入框阴影

与主容器导航面板相同，在主容器导航面板中，“所有”和“与我共享”都应为灰色，但单击时会变为黑色和大字体，但单击时不会执行任何操作

第三，当我在导航面板中单击“Post”时，它应该显示hello按钮，当我单击“ALL”按钮时，它应该只在主区域显示hello，但它不工作，hello按钮和hello文本都默认显示，但我想在单击“ALL”按钮时显示hello文本。不确定是因为react路由器还是其他什么问题。我知道只有在单击时才显示组件，但我忘记了，因为我没有进行足够的练习或写下来，我现在快发疯了。如果有人能为我指出正确的方向，我将非常感激

我已经把演示放在了代码沙盒中

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;

---

你把很多问题都问成了一个问题。我不会在这里回答CSS部分。我将集中讨论问题的

部分

来自App.js的

<Layout>
  <Switch>
    <Route exact path="/" component={Home} />
    <Route path="/about" component={About} />
    <Route path="/secTab" component={SecTab} />
    <Route Component={NoMatch} />
  </Switch>
</Layout>

    return (
      <Container className="conMain">
        <Row>
          <Col xs={3} className="leftMain">
            <LeftBox />
          </Col>
          <Col xs={9} className="rightMain">
            <TextBox />
          </Col>
        </Row>
      </Container>
    );

    return (
      <React.Fragment>
      <Container className="conMain">
        <Row>
          <Col xs={3} className="leftMain">
            <LeftBox />
          </Col>
          <Col xs={9} className="rightMain">
            <TextBox />
          </Col>
        </Row>
      </Container>
      {this.props.children}    // THIS WILL RENDER YOUR <Switch>
      </React.Fragment>
    );

您问题的1和2个主题可能与CSS更相关，我建议您将它们转移到另一个问题。
它显示了主页。在一个不应该展示的地方。我只想在点击“全部”或“与我共享”时显示这些道具。也不是默认的home或about components，而是sectab。应该有办法的，对吧？我更新了codesandbox，我希望您理解我所传达的问题。我建议您将您的问题分解为较小的项目，这样您就可以隔离它们，并就每一个问题寻求具体的帮助。在我的回答中，您可以看到为什么React router不基于路由呈现您的组件。我不知道如何将路由器问题分解为更小的部分。你能帮我解决路由器问题吗？比如为什么它在加载时显示主组件。即使我删除了主组件，当我点击导航栏上的徽标时，它也不会指向主页面，因此删除主组件也不是一个选项。我的问题是，当我单击导航面板上的任何按钮时，我想显示一个特定组件，它位于导航面板下方，而不是导航面板的侧面。请帮帮我。我已经被困了一个星期了，删除了
文本框
。看看这是否是你想要的。它不再显示在它下面了。好的，侧边栏正在工作，但我想在布局中显示home，about，以及当我单击POST时，应该显示home组件，当我单击all时，应该显示sectab。这和你在侧边栏上做的一样，但我希望它们都显示在layout.js组件中的POST，all，SHARED with ME选项卡下。
.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;
}

<Layout>
  <Switch>
    <Route exact path="/" component={Home} />
    <Route path="/about" component={About} />
    <Route path="/secTab" component={SecTab} />
    <Route Component={NoMatch} />
  </Switch>
</Layout>

    return (
      <Container className="conMain">
        <Row>
          <Col xs={3} className="leftMain">
            <LeftBox />
          </Col>
          <Col xs={9} className="rightMain">
            <TextBox />
          </Col>
        </Row>
      </Container>
    );

    return (
      <React.Fragment>
      <Container className="conMain">
        <Row>
          <Col xs={3} className="leftMain">
            <LeftBox />
          </Col>
          <Col xs={9} className="rightMain">
            <TextBox />
          </Col>
        </Row>
      </Container>
      {this.props.children}    // THIS WILL RENDER YOUR <Switch>
      </React.Fragment>
    );