React Router 4 -- handling 404 for nested routes

Question

I have the following code and I am going to handle nested route while wrong one is entered:

<Switch>
<Route path="/" exact component={Home} />
<Route path="/sample" exact component={Sample} />
<Route path="/sample/example/:id" exact component={Example} />
<Route path="/sample/:example" exact component={Example} />
<Route component={404}/>
</Switch>

If user enters localhost:3000/something-wrong, it will show 404 page correctly. However, when he enters localhost:3000/sample/something-wrong, nothing is rendered! How should I handle this issue in a manner way?

Answer 1

localhost:3000/sample/something-wrong is handled by path="/sample/:example"

localhost:3000/sample/example/something-wrong would be handled by path="/sample/example/:id"

as you are using wild-cards, there's really nothing you can do except enable the Example component to render an appropriate message, or maybe redirect to a dedicated 404 screen.