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

【问题标题】：Nested Route (React-Router-Dom 6.0.2) not working as expected嵌套路由（React-Router-Dom 6.0.2）未按预期工作
【发布时间】：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/* 前缀，那么它就不起作用。

标签： reactjs react-router react-router-dom

【解决方案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>

【讨论】：