reactjs - React router - 嵌套路由不起作用

Question

我的目标是拥有 http://mydomain/route1渲染 React 组件 Component1 和 http://mydomain/route2渲染组件2。因此，我认为编写如下所示的路由是很自然的:

    <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现在按预期工作。然而，我不明白为什么前一种方法不起作用，而它对我来说看起来更符合逻辑、更整洁。

嵌套语法适用于“/”和“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当 URL 为 App 时将挂载(在 /route1/route2 内部) .

如果您想嵌套组件，则需要添加 <RouteHandler/>至Component1所以它会渲染 Component2在它里面。

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