反应路由器和嵌套路由

我很困惑如何创建以下（非常简单）路由结构。反应路由器和嵌套路由

我有了对登录组件的顶级路线的应用程序：

和应用程序本身另一个顶级路线（我们称之为主分量）：

现在，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>

但这显然是错误的。什么是实现这个路由结构的正确方法？

来源

2016-04-24 azangru

听起来像你应该有你的登录组件在你的欢迎组件。在欢迎组件内部创建一个呈现函数，以呈现Login或Welcome组件，具体取决于它们是否已登录。 –

这可能是一个很好的解决方案，试试吧。

<Route component={App}> 
    <Route path="/" component={Home}> 
    <IndexRoute component={Welcome}/> 
    <Route path="/foo" component={Foo}/> 
    </Route> 
    <Route path="/login" component={Login}/> 
</Route>

来源

2016-04-25 00:32:39 QoP

耶！这很好用！感谢您的解决方案。 – azangru

反应路由器和嵌套路由

回答

相关问题