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）都不：

基本上我需要多条路线

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

与内容相等

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

自从反应路由器v4起，您就不会嵌套路由，而是将其保留在组件中。 here是您要达到的相同目的的基本示例。

Answer 3

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

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

有关更多详细信息，请请求介绍我的gist link。

反应路由器多条路线

3 个答案: