Base path inconsistencies

[duarten]

I found a couple of situations where the handling around the base path isn't straightfoward:

1. When composing <Router />'s, like such:

   <Router base="/a">
      <Router base="/b" />...</Router>
      ...
    </Router>
   

   The inner router's base will be /b instead of /a/b;
2. When using a setLocation obtained in another context, like:

   const [, navigate] = useLocation()
   <Router base="/a">
        <Route>() => { navigate("/b") }</Route>
   </Router>
   

   This will navigate to /b instead of to /a/b.

Do you think these should be fixed? Fixing 1. is straightforward, fixing 2. can probably be done by keeping a stack of routers in the RouterCtx.

[cbbfcd]

👍

[HansBrende]

This single feature is pretty much the only feature react-router has on you all, as it is extremely convenient to not worry about what base path your app (or app component!) is located under and only talk about relative paths (although personally I think it would make more sense to deprecate <Router base="router-base"> in favor of <Route path="route-base/*"> (and then infer the base path to be "route-base" in the context of the Route). Then we don't have to introduce a Router to get this niiice feature!

Just beware of the stack of routers in the context... you don't want the app re-rendering every time they change. Instead, use a stable ref and call ref.current or ref.current.parent.current (to go backwards) etc. inside useNavigate, since really does not need to trigger a re-render or have a callback dependency on the router structure. See, e.g., the problems react router has run into over useNavigate (https://github.com/remix-run/react-router/issues/7634).

[molefrog]

Fixed via #265