反应路由器和嵌套路由
问题描述:
我很困惑如何创建以下(非常简单)路由结构。反应路由器和嵌套路由
我有了对登录组件的*路线的应用程序:
和应用程序本身另一个*路线(我们称之为主分量):
现在,Home组件具有一个标题,一个侧栏以及用于子视图的主空间。
登录组件应显示在/login
路径;这很简单。但令我困惑的是,我希望/
路径在主视图中显示带有特定子组件(我们称之为“欢迎”)的Home组件。另外,我能想到的大多数其他路径都应该在Home组件内部呈现子组件。
因此,要重申:
路径/
呈现与欢迎成分的主页组件里面
路径/foo
呈现内与富组件首页组件它
...
路径/login
呈现登录组件
感觉就像我正在考虑的结构是:
<Route path='/' component={App}>
<IndexRoute component={Home}>
<IndexRoute component={Welcome}>
<Route path='foo' component={Foo}/>
</IndexRoute>
<Route path='login' component={Login}/>
</Route>
但这显然是错误的。什么是实现这个路由结构的正确方法?
答
这可能是一个很好的解决方案,试试吧。
<Route component={App}>
<Route path="/" component={Home}>
<IndexRoute component={Welcome}/>
<Route path="/foo" component={Foo}/>
</Route>
<Route path="/login" component={Login}/>
</Route>
+0
耶!这很好用!感谢您的解决方案。 – azangru
听起来像你应该有你的登录组件在你的欢迎组件。在欢迎组件内部创建一个呈现函数,以呈现Login或Welcome组件,具体取决于它们是否已登录。 –