Contextual Navigation & Redirection (useNavigation, <Navigate />, and <A />)

[Kerrick]

Let's say an example app has this as part of its routing structure:

<Routes>
  <Route path="/" element={<Navigate href="/locations" />} />
  <Route path="/login" component={Login} />
  <Route path="/locations" component={Locations}>
    <Route path="/" component={LocationsIndex} data={LocationsIndexData} />
    <Route path="/:locationID" component={Location} data={LocationData}>
      <Route path="/home" component={Home} data={HomeData} />
      <Route path="/settings" component={Settings} data={SettingsData} />
    </Route>
  </Route>
</Routes>

In this case, if the user visits https://example.com/, they'll be redirected to https://example.com/locations. Let's also say that a new requirement for the application is that when a user visits https://example.com/locations/123, they get redirected to https://example.com/locations/123/home. One might think you can add another Route + Navigate like this:

<Routes>
  <Route path="/" element={<Navigate href="/locations" />} />
  <Route path="/login" component={Login} />
  <Route path="/locations" component={Locations}>
    <Route path="/" component={LocationsIndex} data={LocationsIndexData} />
    <Route path="/:locationId" component={Location} data={LocationData}>
      <Route path="/" element={<Navigate href="👉 This is what this post is about! 👈" />} />
      <Route path="/home" component={Home} data={HomeData} />
      <Route path="/settings" component={Settings} data={SettingsData} />
    </Route>
  </Route>
</Routes>

However, this won't work. If you pass the new <Navigate /> an href prop of /home, you'll get redirected to https://example.com/home. If you pass it an href prop of /locations/:locationId/home, you'll get redirected to https://example.com/locations/:locationId/home (this is not a placeholder, the colon is really in the URL). I don't believe there's anything you can pass the href prop that'll get you redirected from https://example.com/locations/123 to https://example.com/locations/123/home.

In an ideal world, there'd be an easy way to tell the SolidJS Router that I'd like to navigate to a given URL within the context of existing dynamic segments parameters, without needing to look up the current values and construct a new string. One could imagine how it would be even more tedious to look up & concatenate parameters in the case of a URL structure like https://example.com/locations/123/widgets/456/comments/789/edit.

I'd love this to be possible. In fact, it'd be nice if it was not only possible, easy, and documented for <Navigate /> -- but also for useNavigation() and <A /> as well!

[Kerrick]

Nevermind, this seems to work by passing "./home" there! Just like actual web hrefs. :)

<Routes>
  <Route path="/" element={<Navigate href="/locations" />} />
  <Route path="/login" component={Login} />
  <Route path="/locations" component={Locations}>
    <Route path="/" component={LocationsIndex} data={LocationsIndexData} />
    <Route path="/:locationId" component={Location} data={LocationData}>
      <Route path="/" element={<Navigate href="./home" />} />
      <Route path="/home" component={Home} data={HomeData} />
      <Route path="/settings" component={Settings} data={SettingsData} />
    </Route>
  </Route>
</Routes>