反应路由器 - 嵌套路由不起作用 [英] React router - Nested routes not working

问题描述

我的目标是让 http://mydomain/route1 渲染 React 组件 Component1 和 http://mydomain/route2 渲染 Component2.所以，我认为写如下路线是很自然的:

 <Route name="route2" handler={Component2}/></路线><DefaultRoute name="home" handler={Home}/></路线>

http://mydomain/route1 按预期工作，但 http://mydomain/route2 改为呈现 Component1.

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

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

http://mydomain/route2 和 http://mydomain/route2 现在按预期工作.但是，我不明白为什么前一个在我看来更合乎逻辑和更整洁时不起作用.

嵌套语法适用于/"和route1"，那么为什么route1"和route2"不适用?

解决方案

问题是在嵌套路由中，路由器会尝试挂载所有匹配层次结构的组件.当您希望将组件相互嵌套时，最好使用此方法...但如果您希望两个单独的路由匹配不同的组件，则它们需要是自己的路由.

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

当 URL 为 /route1/route2 时，

Component2 将挂载(在 App 内).

如果你想嵌套组件，你需要将 添加到 Component1 以便它渲染 Component2在它里面.

之所以有效，是因为嵌套组件与嵌套 URL 不同，可以由路由器单独处理.有时您希望组件嵌套但不一定是 URL，反之亦然.

My goal is to have http://mydomain/route1 render React component Component1 and http://mydomain/route2 render Component2. So, I thought it's natural to write the routes like the following:

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

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

http://mydomain/route1 works as expected but http://mydomain/route2 renders Component1 instead.

Then I read this question and changed the routes to as follows:

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

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

Both http://mydomain/route2 and http://mydomain/route2 work as expected now. However, I don't understand why the former one does not work while it looks more logical and neater to me.

The nested syntax works for "/" and "route1" so why not "route1" and "route2"?

解决方案

The problem is that in nested routes, the router will try to mount all the components that match the hierarchy. This is best used when you want to nest components inside each other... but if you want two separate routes to match different components, they will need to be their own routes.

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

Component2 will mount (inside of App) when the URL is /route1/route2.

If you wanted to nest the components, you would need to add <RouteHandler/> to Component1 so it would render Component2 inside of it.

The reason this works is because nesting components are not the same as nesting URLs and can be handled separately by the router. Sometimes you want the components to nest but not necessarily the URLs, and vice versa.

这篇关于反应路由器 - 嵌套路由不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！