刷新嵌套路由-React Router 4



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

下面是实际问题的沙箱链接。

现在,我将作简要介绍。

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

原因是路由匹配发生在组件App.tsx,并且它没有找到任何相关的匹配。够公平的!

我可以通过在根级别添加指定的路由并将它们全部压平来应对这种情况。

类似的东西

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

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

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

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

那么,在React router 4中使用动态、声明性和嵌套路由来包含页面刷新并在发生刷新时重定向到直接父级的最佳解决方案是什么呢?

在这种情况下,当term下的路由1、路由2、路由3中的任何一个被刷新时,我希望重定向到/root/term

希望,我把问题说清楚了!

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

更新的沙盒链接

也许对exact来说学习很好。

如果路径是另一个路由器,那么它永远不应该是一个精确的Route。子路由器的基本名称应包括完整路径,即/root/term

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