Relative routes and links: provide demo in README about wouter

[molefrog]

@Hotell Hey! Actually, with the latest basepath update it's now possible to use nested routes! I'll compile a demo and put it in the README

[Hotell]

@Hotell Hey! Actually, with the latest basepath update it's now possible to use nested routes! I'll compile a demo and put it in the README

@molefrog any news ? 🙏 Can I help in some way ?

[molefrog]

Hey sorry guys, I don't think this ever will be implemented in the library. Having nesting routes seems like something that is way too beyond wouter's mission.

I do think, however, that it should be possible to write a library that implements this using wouter's standard components like Route or hooks like useLocation. I'll be glad to reference this in the library's README if someone write this packages.

Closing this 😢

[molefrog]

@kristiandupont Hey! Thanks for the feedback!
So by relative links do you mean something like an app mounted at the static subpath, so all the routes cointain the fixed prefix?

Like /users/1 actually goes to /app/users/1?

[kristiandupont]

Yes. See: https://reach.tech/router/example/nested-routes

[midudev]

Interested as well. Implementation example from react-router v.3

    <Route path="/:lang" component={RealEstateApp}>
      <Route
        path="catalogo-productos"
        component={loadUserProductCataloguePage}
      />
   </Route>

[molefrog]

Unfortunately, nested routing isn't something that is supported at the moment and it isn't in the roadmap either. This would probably require the reimplementation of the entire library, however I do believe that you can achieve the similar behaviour by extending the default Route component. It might also require some useContext magic.

I tried to recreate this in CodeSandbox, it's not 100% working, but at least the idea:
https://codesandbox.io/s/wouter-nested-routes-ffd5h

[molefrog]

The main problem is: wouter matches an entire url string by default, so the parent route won't be rendered. I can suggest to see how this can be implemented in React Router first, as it was the main source of the inspiration in terms of an API.

[Hotell]

Hey sorry guys, I don't think this ever will be implemented in the library. Having nesting routes seems like something that is way too beyond wouter's mission.

I do think, however, that it should be possible to write a library that implements this using wouter's standard components like Route or hooks like useLocation. I'll be glad to reference this in the library's README if someone write this packages.

Closing this 😢

I'd suggest to put this in main Readme. as for a person coming from other common routing solutions, one would expect that following works 👉

const App = () => {
  return (
    <Switch>
      <Route path="/">
        <Home />
      </Route>
      <Route path="/topics">
        <Topics />
      </Route>
    </Switch>
  );
};

const Topics = () => {
  return (
    <Switch>
      <Route path="/topics">
        <h3>Please select a topic.</h3>
      </Route>
      <Route path="/topics/:topicId">
        <Topic />
      </Route>
    </Switch>
  );
};

WDYT ? thx

[Hotell]

wooot! looking forward to it 👌

[cztomsik]

It is kinda possible (you need to wrap routes in the <Router base="...">) but it's not exactly what you might expect, because <Router> is not relative (does not respect base of its parent)

Not sure if this is by design but I think it could be fixed.

Or at least you can define your own <RelativeRouter> which would work correctly then:

const RelativeRouter = ({ children, relativeBase }) => {
  const { base } = useRouter()

  return <Router base={`${base}/${relativeBase}`}>{children}</Router>
}

and then you can do something like:

<Route path="">
  <h1>Index</h1>
  <Link to="foo"><a>Foo</a></Link>
</Route>
<RelativeRouter relativeBase="foo">
  <Route path="">
    Foo index
  </Route>
  <Route path="/bar">
    /foo/bar
  </Route>
</RelativeRouter>

and it can be nested indefinitely

[molefrog]

Documented in the README:
https://github.com/molefrog/wouter#how-do-i-make-a-default-route