React Router 多条路由

Question

您好，我正在尝试使用 react 路由器进行多条路由，但没有成功 基本上我的布局会有不同的内容 还有一个内容不同的仪表板，但没有成功

const HomeContent = () => {
  return (
    <div style={{ background: 'red', width: '100%', height: '400px' }}>
      Home
    </div>
  );
};

const AboutContent = () => {
  return (
    <div style={{ background: 'blue', width: '100%', height: '400px' }}>
      About
    </div>
  );
};

const DashBoardNav = () => {
  return (
    <div style={{ background: 'red', width: '100%', height: '400px' }}>
      DashBoardNav
      <ul>
        <li>Home</li>
        <li>About</li>
      </ul>
    </div>
  );
};
const MainRoutes = () => {
  const dispatch = useDispatch();
  const { popUpIsOpen } = useSelector(RootState => RootState.togglePopUp);
  const { sideIsOpen } = useSelector(RootState => RootState.toggleSide);
  return (
    <GlobalContainer>
      <GlobalStyle />
      <Overlay
        onClick={() =>
          popUpIsOpen ? dispatch(toggle()) : dispatch(toggleSide())
        }
        pop={popUpIsOpen ? popUpIsOpen : sideIsOpen}
      />
      <Routes>
        <Route path="/" element={<Header />} />
        <Route path="dashboard" element={<DashBoardNav />} />
      </Routes>
      <Content>
        <Routes>
          <Route exact path="/" element={<HomeContent />}>
            <Route path="about" element={<AboutContent />} />
          </Route>
          <Route path="dashboard" element={<> DashBoard </>}>
            <Route path="about" element={<> about </>} />
          </Route>
        </Routes>
      </Content>

      <Footer />
    </GlobalContainer>
  );
};

export default MainRoutes;

但我收到以下错误 我的导航栏在我的“/”中呈现正常，我的 Home 组件是这样的：

当我尝试输入我的“/ about”路径时，我的导航栏没有出现，我的 div ABOUT（组件：AboutContent） 两者都没有：

基本上我需要多条路线

我有两个导航栏（一个来自装载页面，另一个来自仪表板）

内容一样

Answer 1

<Switch>
  <Route exact path="/" element={<HomeContent />} />
  <Route path="/about" element={<AboutContent />} />
  <Route path="/dashboard" element={<DashBoardNav />} />
</Switch>

这可以解决您的问题。基本上 switch 用于切换一个或多个组件。所以你需要传递确切的组件路径，它只能引用确切的特定组件。

更多详情，请您参考我的gist link。

Answer 2

从 react router v4 开始，您不再嵌套路由，而是将它们保存在组件中。 here 是一个基本示例，用于您尝试实现的相同目的。

Answer 3

看起来这里有几个问题，包括path 属性和嵌套的Route 组件。

我发现将Routes 包装在Switch 中时更容易阅读代码，因此很明显只有Route 组件之一将被呈现。

这是一个完整的示例（删除了一些与问题无关的其他代码）：

const MainRoutes = () => {
  return (
    <GlobalContainer>
      <Switch>
        <Route exact path="/">
          <Header/>
        </Route>

        <Route path="/dashboard">
          <DashBoardNav/>
        </Route>
      </Switch>

      <Content>
        <Switch>
          <Route exact path="/">
            <HomeContent/>
          </Route>

          <Route path="/about">
            <AboutContent/>
          </Route>
        </Switch>
      </Content>

      <Footer />
    </GlobalContainer>
  );
};