reactjs – React路由器 – 嵌套路由不工作

前端之家收集整理的这篇文章主要介绍了reactjs – React路由器 – 嵌套路由不工作前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我的目标是让 http://mydomain/route1渲染反应组件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都按预期工作。然而,我不明白为什么前者不工作,而它看起来更合乎逻辑,更整洁。

嵌套语法适用于“/”和“route1”,所以为什么不“route1”和“route2”?

问题是在嵌套路由中,路由器将尝试挂接与层次结构匹配的所有组件。当您希望将组件嵌套在彼此之间时,这最适合使用…但是如果您需要两个单独的路由来匹配不同的组件,则它们将需要是自己的路由。
<Route handler={App}>
  <Route path="route1" handler={Component1} />
  <Route path="/route1/route2" handler={Component2} />
  <DefaultRoute name="home" handler={Home} />
</Route>

当URL为/ route1 / route2时,Component2将挂载(在App中)。

如果您想嵌套组件,则需要添加< RouteHandler />到Component1,所以它会使Component2在其中。

原因是因为嵌套组件与嵌套URL不同,路由器可以分开处理。有时您希望组件嵌套,但不一定是URL,反之亦然。

猜你在找的React相关文章