Let's say we have this setup
const Parent = () => (
<Switch>
<Route path="/data" component={Child}
</Switch>
)
const Child = () => (
<Switch>
<Route exact path="/" component={SomethingList} />
<Route path="/:id" component={ShowSomething} />
</Switch>
);
someUrl/data
SomethingList
someUrl/5
ShowSomething
ShowSomething
That's because /:id
doesn't mean it has to be an integer value. It can be whatever like: /some-path
- and id
would equal to some-path
. That's why you get this behavior.
In your context, the only way to render SomethingList
is to use /
route. Nothing else will match. I would do it like this:
const Parent = () => (
<Switch>
<Route path="/data" component={Child}
</Switch>
)
const Child = () => (
<Switch>
<Route exact path="/data" component={SomethingList} />
<Route path="/data/:id" component={ShowSomething} />
</Switch>
);
I guess you think that you can declare relative paths in your child component, which (I think) is not possible with RR4.