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} />
</Route>
should become
<Route path="/topics" component={Topics} />
with
const Topics = ({ match }) => (
<div>
<h2>Topics</h2>
<Link to={`${match.url}/exampleTopicId`}>
Example topic
</Link>
<Route path={`${match.path}/:topicId`} component={Topic}/>
</div>
)
Here is a basic example straight from the react-router documentation.