React Router - Nested links redirecting to custom 404 page

Question

I have a built a simple react router project in which "Topics" page/component has nested links "one", "two", "three" and then a Route mapping to component "Topic" which renders content with match.params.id, but its redirecting to custom not found page,

Here's the link to codesandbox:

https://codesandbox.io/s/react-routing-ecdwt

topics one, two and three are they going to be additional components or external sites? — ShrewdStyle
another additional component called "Topic" should be displayed, instead displaying notFoundPage component — Nag

Malkhazi Dartsmelidze Malkhazi Dartsmelidze · Accepted Answer · 2020-03-29T10:40:29

You have specified exact property in /topics route.

You can specify route like this:

<Route path="/topics/:topicId" component={SingleTopic} />
// /topics/one
// /topics/two
// /topics/three

In SingleTopic component you can get specified topic id by this.props.match.params.topicId and then load requested topic.

Hope this helps you.

React Router - Nested links redirecting to custom 404 page

1 Answers