我有多个布局需要包含不同的屏幕。每个布局都有自己的页眉、页脚和其他类似页面应该共享的内容。这是我想到的代码:
上面的代码显然不起作用,因为:
警告:您不应在同一路由中使用
类似的问题的答案建议直接使用包装组件。
这种方法的问题在于,即使它只渲染了一个屏幕,它也会渲染来自其他布局的元素。例如,如果你在
一些人建议获取所有布局的内容,并将它们添加为当前路由的同级元素。然而,对我来说这样做太混乱了。我希望将所有布局保存在单独的文件中,并将屏幕作为子元素传递给它们。
<BrowserRouter>
<Route path={['/index', '/about']} component={BaseLayout}>
<Route path="/index" component={Index} />
<Route path="/about" component={About} />
</Route>
<Route path={['/sign-in', '/sign-up']} component={AuthLayout}>
<Route path="/sign-in" component={SignIn} />
<Route path="/sign-up" component={SignUp} />
</Route>
<Route path={['/stats'} component={DashboardLayout}> <Route path="/stats" component={Stats} /> </Route></BrowserRouter>
上面的代码显然不起作用,因为:
警告:您不应在同一路由中使用
<Route component>
和<Router>
; <Route component>
将被忽略。类似的问题的答案建议直接使用包装组件。
<BrowserRouter>
<BaseLayout>
<Route path="/index" component={Index} />
<Route path="/about" component={About} />
</BaseLayout>
<AuthLayout>
<Route path="/sign-in" component={SignIn} />
<Route path="/sign-up" component={SignUp} />
</AuthLayout>
<DashboardLayout>
<Route path="/stats" component={Stats} />
</DashboardLayout>
</BrowserRouter>
这种方法的问题在于,即使它只渲染了一个屏幕,它也会渲染来自其他布局的元素。例如,如果你在
BaseLayout
中呈现的索引页面上,你也会看到来自AuthLayout
和DashboardLayout
的元素,这有点合理,因为它们没有包装在Route
中。一些人建议获取所有布局的内容,并将它们添加为当前路由的同级元素。然而,对我来说这样做太混乱了。我希望将所有布局保存在单独的文件中,并将屏幕作为子元素传递给它们。
exact
,以便不会出现多个匹配吗? - Drew Reese<Route path="/index" component={BaseLayout(Index)} />
。 - Drew Reese