Refresh of nested Routes - React Router 4

Question

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. All I'm left with is AppHeader.

The reason being that the route match happens at Component App.tsx and it does not find any relevant match. 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 i.e App here). That is what React router 4 prefers us to do.

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 -

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?

In this case, I would like do redirect to /root/term when any of route1, route2, route3 under term are refreshed.

Hope, I made my question clear!

Update - @Nguyen's answer pointed me towards the right direction. Ony change required was to remove exact from parent <Route path="/term" />. Child routes can still have an exact match.

Updated Sandbox link

Good learning for exact perhaps.

Answer 1

If the path is another router, it should never be an exact Route. The basename of the child router should include full path i.e /root/term

Here's the sandbox link to my version of router. Hope that helps!