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组件中显示正常：

并且当我尝试输入“ /关于”路径时，我的导航栏不出现，并且我的div关于（组件：AboutContent）都不：

基本上我需要多条路线

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

与内容相等

你好，我试图用react路由器做多条路线，但基本上没有成功，我的布局将具有不同的内容，还有一个仪表板具有不同的内容，但是没有...

Answer 1

如果仅根据路径渲染一个Route组件，则需要将Routes包装在Switch中，如下所示：