React-router: v4: Should paths merge in child routes?

[TomiS]

I just wanted to make sure this is by design and intentional.

Let's say I want to have a path /admin/products

This is how my intuition thought it should work.

// Main component
<Switch>
    <Route path='/admin' component={Admin} />
    <Route path='/foo' component={Foo} />
</Switch>
// Admin component
<Switch>
    <Route path='/products' component={AdminProducts} />
</Switch>

Instead this is what seems to work

// Main component
<Switch>
    <Route path='/admin' component={Admin} />
    <Route path='/foo' component={Foo} />
</Switch>
// Admin component
<Switch>
    <Route path='/admin/products' component={AdminProducts} />
</Switch>

I kind of thought that putting routes inside other routes would result path to be a combined result of parent and child paths.

Is there a reason it's not like that? Am I the only one with this intuition?

[pshrmn]

Currently there is no relative path support, so a <Route>'s path should be absolute to the root. You can either hardcode it like in your example or concatentate your path with match.path.

const Admin = ({ match }) => (
  <Switch>
    <Route path={`${match.path}/products`} component={AdminProducts} />
  </Switch>
)

[manuel-mauky]

Is there any plan of supporting relative paths?
I had the same expectation for relative paths in child components.
The current implementation leads to a tighter coupling between parent and child components because if you change the path of the parent component you have to touch the child components too, potentially multiple levels below in the routing hierarchy.

[timdorr]

@lestard See #4459 and #4539