react-router - 嵌套路由不起作用

IT技术 reactjs react-router
2021-04-26 02:01:09

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

3个回答

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

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

Component2App当 URL 为 时，将挂载（在 内）/route1/route2。

如果您想嵌套组件，则需要添加<RouteHandler/>toComponent1以便在其Component2内部进行渲染。

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

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

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

这样，当 URL 为/route1/route2任何导航链接时，route1将正确地具有活动状态。

我正在解决类似的问题（Component2未渲​​染）并且嵌套路由不起作用，因为我忘记渲染{this.props.children}了Component1

其它你可能感兴趣的问题
上一篇减少材料用量 下一篇印刷品现在太粘在床上了。该怎么办？