嵌套路由（React-Router-Dom 6.0.2）未按预期工作

Posted 2023-02-19

【中文标题】嵌套路由（React-Router-Dom 6.0.2）未按预期工作

【英文标题】：Nested Route (React-Router-Dom 6.0.2) not working as expected

【发布时间】：2022-01-22 04:41:21

【问题描述】：

我是 React 新手，在 main.tsx（由 Nx 生成的应用程序）中有此路由配置：

ReactDOM.render(
  <StrictMode>
    <IocContainerProvider container=container>
      <Provider store=store>

        <BrowserRouter>
          <Routes>
            <Route path="//*" element=<App />></Route>
            /* <Route path="/app/*" element=<App />></Route> */
            <Route path="login" element=<Login />></Route>
            <Route path="*" element=<PageNotFound /> />
          </Routes>
        </BrowserRouter>
        
      </Provider>
    </IocContainerProvider>
  </StrictMode>,
  document.getElementById('root')
);

然后在 App-Component 中：

export function App() 
  const navbarState = useSelector((state: AppState) => state.navbar);

  return (
    <>
      <Sidebar></Sidebar>
      <main className="main-content position-relative max-height-vh-100 h-100 border-radius-lg ">
        <Navbar currentPageName=navbarState.currentPath></Navbar>
        <div className="container-fluid py-4">
          <Routes>        
            <Route path="/" element=<Dashboard /> />
            <Route path="/incomes" element=<Incomes /> />         
            <Route path="*" element=<PageNotFound /> />
          </Routes>
          <Footer></Footer>
        </div>
      </main>
    </>
  );


export default App;

使用<Route path="//*" element=<App />></Route>的结果：

通过 http://localhost:4200/ ==> 导航到仪表板工作 通过以下方式导航到登录：http://localhost:4200/login ==> 有效

- 通过以下方式导航到收入：http://localhost:4200/incomes ==> PageNotFound

使用<Route path="/app/*" element=<App />></Route>的结果：

通过以下方式导航到仪表板：http://localhost:4200/app ==> 有效 通过以下方式导航到登录：http://localhost:4200/login ==> 有效 通过以下方式导航到收入：http://localhost:4200/app/incomes ==> 工作

我不想在此处使用“/app/*”前​​缀来导航到“收入组件”。我该如何解决这个问题？

【问题讨论】：

你能多解释一下你想要实现什么吗？我不明白你的目的是什么，什么不起作用

您好，我想以嵌套路由的形式导航到收入组件。关键是如果我不在 main.tsx 父路由中使用 /app/* 前缀，那么它就不起作用。

【参考方案1】：

这里没有任何嵌套路由。只是路线不同而已。我建议将所有路由分组在同一个地方，这样更容易理解您的路由逻辑。然后，如果您想使用路径 //incomes 访问收入组件，只需将路由添加到 Routes 组件（在您的 index.js 中），如下所示：

<Routes>
        <Route path="//*" element=<App /> />
        <Route path="//incomes" element=<Incomes/> />
        <Route path="//login" element=<Login /> />
        <Route path="*" element=<PageNotFound /> />
</Routes>

你也可以看看官方documentation

或者，如果您想拥有嵌套路由，则必须将一些 Route 添加到 Route 组件中，就像在 example 中显示的那样。但是，嵌套 Route 的用途不同，因此您必须根据自己的需要进行选择

 <Routes>
        <Route path="//" element=<App />>
            // This will be accessible through //incomes
            <Route path="incomes" element=<Incomes/> />
        </Route>
        <Route path="//login" element=<Login /> />
        <Route path="*" element=<PageNotFound /> />
</Routes>