Nested routes with react router v4 / v5

In react-router-v4 you don’t nest <Routes />. Instead, you put them inside another <Component />.

For instance

<Route path="/topics" component={Topics}>
  <Route path="/topics/:topicId" component={Topic} />

should become

<Route path="/topics" component={Topics} />


const Topics = ({ match }) => (
    <Link to={`${match.url}/exampleTopicId`}>
      Example topic
    <Route path={`${match.path}/:topicId`} component={Topic}/>

Here is a basic example straight from the react-router documentation.

Leave a Comment