刷新嵌套路由 - React Router 4

Question

问题很简单，我没有找到任何相关的设置。

所以这里是指向实际问题的沙盒链接。

现在，我将简要介绍。

如果您从应用程序中的 Sandbox 链接导航到root/term/ ，然后导航到 Route 2 组件，最后点击刷新，该组件就会消失。 我只剩下AppHeader。

原因是路由匹配发生在 Component App.tsx并且没有找到任何相关匹配。 很公平！

我可以通过在根级别添加指定的路由并将它们全部展平来解决这个问题。

就像是

<Route path="/root/term/" />
<Router path="/root/term/route1" />
<Route path="/root/term/route2" />

但我的问题是，如果我真的必须利用嵌套路由的动态路由，我不应该在一个地方添加所有路由（根，即此处的应用程序）。 这就是 React 路由器 4 更喜欢我们做的事情。

唯一的问题出现在刷新的情况下。

在搜索时弹出的常见解决方案是检测刷新并防止重新加载。 但即使是API也是实验性的——

那么，在 React 路由器 4 中处理动态、声明性和嵌套路由以包含页面刷新并在发生刷新时可能重定向到直接父级的最佳解决方案是什么？

在这种情况下，我想在term下的 route1、route2、route3 中的任何一个被刷新时重定向到/root/term 。

希望，我把我的问题说清楚了！

更新- @Nguyen 的回答为我指明了正确的方向。 所需的唯一更改是从父<Route path="/term" />中删除exact的内容。 子路由仍然可以完全匹配。

更新了沙盒链接

exact学习也许很好。

Answer 1

如果路径是另一个路由器，它不应该是一个确切的路由。 子路由器的基本名称应包含完整路径，即 /root/term

这是我的路由器版本的沙盒链接。 希望有帮助！