React router - 嵌套路由不起作用

时间:2015-08-31 02:27:33

标签: reactjs react-router

我的目标是让http://mydomain/route1呈现React组件Component1和http://mydomain/route2呈现Component2。所以,我认为编写如下路线是很自然的:

    <Route name="route1" handler={Component1}>
        <Route name="route2" handler={Component2} />
    </Route>

    <DefaultRoute name="home" handler={Home} />
  </Route>

http://mydomain/route1按预期工作,但http://mydomain/route2代替了Component1。

然后我读了this question并将路线更改为:

    <Route name="route1" path="route1" handler={Component1} />
    <Route name="route2" path="route1/route2" handler={Component2} />

    <DefaultRoute name="home" handler={Home} />
  </Route>

现在,http://mydomain/route2http://mydomain/route2都按预期工作。但是,我不明白为什么前一个不起作用,而它看起来更合乎逻辑,更整洁。

嵌套语法适用于&#34; /&#34;和&#34; route1&#34;那么为什么不&#34; route1&#34;和&#34; route2&#34;?

3 个答案:

答案 0 :(得分:26)

问题是在嵌套路由中,路由器将尝试挂载与层次结构匹配的所有组件。当你想要将组件嵌套在彼此内部时,最好使用它...但如果你想要两个独立的路由来匹配不同的组件,它们将需要是他们自己的路由。

<Route handler={App}>
  <Route path="route1" handler={Component1} />
  <Route path="/route1/route2" handler={Component2} />
  <DefaultRoute name="home" handler={Home} />
</Route>
当网址为Component2时,

App将会安装(/route1/route2内)。

如果您想嵌套组件,则需要将<RouteHandler/>添加到Component1,以便在其中呈现Component2

这样做的原因是嵌套组件与嵌套URL不同,并且可以由路由器单独处理。有时您希望组件嵌套但不一定是URL,反之亦然。

答案 1 :(得分:19)

当使用需要正确活动状态的导航的分层路由时,更好的方法是执行以下操作(使用RR2的语法):

<Route path="route1">
    <IndexRoute component={Component1}/>
    <Route path="route2" component={Component2} />
 </Route>

这样,当网址为/route1/route2时,route1的任何导航链接都会正确处于活动状态。

答案 2 :(得分:9)

我正在解决类似问题(Component2未呈现)且嵌套路由无法正常工作,因为我忘记在{this.props.children}中呈现Component1