我想在我的公共布局中渲染我的一些路线,以及我的私人布局中的其他一些路线,是否有一个干净的方法来做到这一点？
示例显然不起作用,但我希望大致解释我正在寻找的内容：
<Router>
<PublicLayout>
<Switch>
<Route exact path="/" component={HomePage} />
<Route exact path="/about" component={AboutPage} />
</Switch>
</PublicLayout>
<PrivateLayout>
<Switch>
<Route exact path="/profile" component={ProfilePage} />
<Route exact path="/dashboard" component={DashboardPage} />
</Switch>
</PrivateLayout>
</Router>
我想要切换某些路由的布局,如何使用新的路由器做到这一点？
嵌套路由不再有效,并给我这个错误：
You should not use <Route component> and <Route children> in the same route; <Route children> will be ignored
编辑：布局包裹整组路线也意味着只要您保留在同一个私人/公共路线组中,这些布局只会呈现一次.如果您的布局必须从您的服务器获取某些东西,这是一个大问题,因为如果您使用布局包装每个页面,这将发生在每个页面更改上.
我为此做的是创建一个简单的组件,为Route组件添加一个额外的属性,即布局：
原文链接：https://www.f2er.com/react/301319.htmlfunction RouteWithLayout({layout,component,...rest}){
return (
<Route {...rest} render={(props) =>
React.createElement( layout,props,React.createElement(component,props))
}/>
);
}
然后在你的情况下你的路线将是这样的
<Switch>
<RouteWithLayout layout={PublicLayout} path="/" component={HomePage}/>
<RouteWithLayout layout={PublicLayout} path="/about" component={AboutPage}/>
<RouteWithLayout layout={PrivateLayout} path="/profile" component={ProfilePage}/>
<RouteWithLayout layout={PrivateLayout} path="/dashboard" component={DashboardPage}/>
</Switch>
