React router - 嵌套路由不起作用

Question

我的目标是让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.

然后我读了这个问题并将路线更改为如下:

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

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

这两个HTTP:// MYDOMAIN /路径2和HTTP:// MYDOMAIN /路径2为目前预计的工作.但是,我不明白为什么前一个不起作用,而它看起来更合乎逻辑,更整洁.

嵌套语法适用于"/"和"route1",为什么不"route1"和"route2"？

Answer 1

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

<Route handler={App}>
  <Route path="route1" handler={Component1} />
  <Route path="/route1/route2" handler={Component2} />
  <DefaultRoute name="home" handler={Home} />
</Route>

Component2将App在URL时挂载(内部)/route1/route2.

如果要嵌套组件,则需要添加<RouteHandler/>,Component1以便在其中进行渲染Component2.

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

Answer 2

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

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

这种方式当URL是/route1/route2任何导航链接时route1将正确地具有活动状态.

Answer 3

我在解决类似的问题(Component2没有渲染)和嵌套的路线是行不通的,因为我忘了呈现{this.props.children}在Component1