Question

我正在使用React Router dom v4构建一个React应用程序。此应用程序具有基本布局，该布局的顶部具有徽标，带有导航按钮的侧栏和包装纸，在此布局内部，我希望根据我单击的导航按钮拥有所有应用程序组件。

为此，我为每个应用程序功能创建了一堆路由器，对于基本布局，我创建了一个名为应用程序的路由。应用程序中带有的所有路由都嵌套，例如，应用程序/配置，应用程序/确认，应用程序/更新数据等...

问题是，这些组件呈现在app组件下方，而不是在其内部，我希望我的组件呈现在这个应为我的应用容器的app组件内部。

如何使这些组件在应用容器中呈现？这可能吗？这是正确的方法吗？关于如何解决这个问题的任何想法？谢谢

Answer 1

我发现了如何使用react路由器dom v4和v5正确地嵌套路由到react中。我在一个单一的route.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

嵌套路由在布局内对路由器dom做出反应

1 个答案: