嵌套路由反應路由器 dom，在布局內

Question

我正在使用反應路由器 dom v4 構建一個反應應用程序。 這個應用程序有一個基本布局，頂部有一個徽標，一個帶有導航按鈕的側邊欄和一個包裝器，在這個布局內，我希望我的所有應用程序組件都取決於我單擊的導航按鈕。

為此，我為每個應用程序功能創建了一堆路由器，並為基本布局創建了一個名為 app.properties 的路由。 應用程序中的所有路由都是嵌套的，例如應用程序/配置、應用程序/確認、應用程序/更新數據等...

問題是，組件在應用程序組件下方呈現，而不是在其中，我希望我的組件在這個應用程序組件內呈現，該組件應該是我的應用程序容器。

如何使這些組件在應用程序容器中呈現？ 這可能嗎？ 這是正確的方法嗎？ 關於如何解決這個問題的任何想法？ 謝謝

Answer 1

我發現了如何使用 react router dom v4 和 v5 在 react 中正確嵌套路由。 我在單個 routes.js 文件中聲明了所有路由，從 v4 開始，正確的方法是在組件內聲明嵌套路由。

是這樣的：

<BrowserRouter>
    <Route path='/' exact component={Home}></Route>
    <Route path='/login' component={Login}></Route>
    <Route path='/signup' component={SignUp}></Route>
    <Route path='/app' component={AppContainer}></Route>
    <Route path='/app/favorites' component={Favorites}></Route>
    <Route path='/app/jobs' component={Jobs}></Route>
    <Route path='/app/settings' component={Settings}></Route>
</BrowserRouter>

這樣，嵌套組件將以線性方式出現在另一個之下。

現在是這樣的：

在我的根組件中，我有這個。

<BrowserRouter>
    <Route path='/' exact component={Home}></Route>
    <Route path='/login' component={Login}></Route>
    <Route path='/signup' component={SignUp}></Route>
    <Route path='/app' component={AppContainer}></Route>
</BrowserRouter>

at the AppComponent I have the nested routes.
like this:

<Route path={'/app/jobs'} component={Jobs}></Route>
<Route path={'/app/favorites'} component={Favorites}></Route>
<Route path={'/app/confirmation'} component={Confirmation}></Route>
<Route path={'/app/settings'} component={Settings}></Route>

now all components with app/ routes will render inside the app container