嵌套路由(React Router Dom 6.0.2)未按预期工作

Question

我是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')
);

然后在应用程序组件中：

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/*"前缀来导航到"收入部分"。我该怎么解决这个问题

Answer 1

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

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

您也可以查看官方文档

或者，如果想要嵌套路由，则必须向路由组件添加一些路由，如本例所示。然而，嵌套路由用于不同的目的，因此您必须根据自己的需求进行相应的选择

<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>