刷新嵌套路由 - 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

這是我的路由器版本的沙盒鏈接。 希望有幫助！