[英]Refresh of nested Routes - React Router 4
Question is simple and I did not find any relevant setup to mine.问题很简单,我没有找到任何相关的设置。
So here goes the sandbox link to the actual issue.所以这里是指向实际问题的沙盒链接。
Now, I will brief.现在,我将简要介绍。
If you navigate to root/term/
and then to Route 2 component from the app in Sandbox link and finally hit refresh, the component disappears.如果您从应用程序中的 Sandbox 链接导航到
root/term/
,然后导航到 Route 2 组件,最后点击刷新,该组件就会消失。 All I'm left with is AppHeader.我只剩下AppHeader。
The reason being that the route match happens at Component App.tsx
and it does not find any relevant match.原因是路由匹配发生在 Component
App.tsx
并且没有找到任何相关匹配。 Fair Enough!很公平!
I can counter this by adding the specified routes at the root level and also flattening them all.我可以通过在根级别添加指定的路由并将它们全部展平来解决这个问题。
Something like就像是
<Route path="/root/term/" />
<Router path="/root/term/route1" />
<Route path="/root/term/route2" />
But my question is that if I really have to leverage the dynamic routing with nested routes, I should not add all routes in one place (root ie App here).但我的问题是,如果我真的必须利用嵌套路由的动态路由,我不应该在一个地方添加所有路由(根,即此处的应用程序)。 That is what React router 4 prefers us to do.
这就是 React 路由器 4 更喜欢我们做的事情。
The only issue arises in the case of a refresh.唯一的问题出现在刷新的情况下。
On Searching common solution that pops up is to detect refresh and prevent reload.在搜索时弹出的常见解决方案是检测刷新并防止重新加载。 But even that API is experimental -
但即使是API也是实验性的——
So what would be the best solution to approach dynamic, declarative and nested routing in React router 4 to contain page refresh and possibly redirect to the immediate parent if a refresh does happens?那么,在 React 路由器 4 中处理动态、声明性和嵌套路由以包含页面刷新并在发生刷新时可能重定向到直接父级的最佳解决方案是什么?
In this case, I would like do redirect to /root/term
when any of route1, route2, route3 under term
are refreshed.在这种情况下,我想在
term
下的 route1、route2、route3 中的任何一个被刷新时重定向到/root/term
。
Hope, I made my question clear!希望,我把我的问题说清楚了!
Update - @Nguyen's answer pointed me towards the right direction.更新- @Nguyen 的回答为我指明了正确的方向。 Ony change required was to remove
exact
from parent <Route path="/term" />
.所需的唯一更改是从父
<Route path="/term" />
中删除exact
的内容。 Child routes can still have an exact match.子路由仍然可以完全匹配。
Updated Sandbox link更新了沙盒链接
Good learning for exact
perhaps. exact
学习也许很好。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.