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

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

我发现将 Route 包装在 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>
  );
};

Answer 2

自 React Router v4 以来，您不再嵌套路由，而是将它们保存在一个组件中。 here 是一个基本示例，与您要达到的目的相同。

Answer 3

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

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

详情请参考我的gist link.

React Router 多路由

React Router multiple Routes

reactjs

react-router-v4