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。

然后我读了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/route2和http://mydomain/route2都按预期工作。但是，我不明白为什么前一个不起作用，而它看起来更合乎逻辑，更整洁。

嵌套语法适用于＆＃34; /＆＃34;和＆＃34; route1＆＃34;那么为什么不＆＃34; route1＆＃34;和＆＃34; route2＆＃34;？

Answer 1

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

<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，反之亦然。

Answer 2

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

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

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

Answer 3

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

React router - 嵌套路由不起作用

3 个答案: