React Router-嵌套路由不起作用

小编典典

React Router-嵌套路由不起作用

reactjs

我的目标是让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”呢？

阅读 1019

2020-07-22

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

2020-07-22