react router 4 "Not Found" page with nested routes

Question

Let's say I have these routes:

   <Switch>
    <Route path="/my-profile" component={MyProfile} />
    <Route path="/logout" component={Logout} />
    <Route component={NotFound} />
   </Switch>

Handling 404 page works okay if I type anything other than my-profile or logout in the address bar. However, if I will type .../my-profile/paththatdoesntexist, I will still see the profile page. How to handle such cases? to show not found page regardless of how much nested the path is.

could you please explain more? I have the `Switch` component in place, but it doesn't solve the issue with nested routes.. — mcmxc, Sep 10 '18 at 15:40
lol man, I was thinking that we don't need the exact prop with Switch component.. Seems like it works as expected now, can you please add your answer here so I can mark it as correct? I believe it will be helpful for other client-side routing beginners like me. — mcmxc, Sep 10 '18 at 15:44
@mcmxc, wrote an answer that scales well with nested routes on the Duplicate question. Please do have a look at it — Shubham Khatri, Sep 10 '18 at 15:52

score 1 · Accepted Answer · answered Sep 10 '18 at 15:45

You can use the exact prop in react-router-4 as follows in your routes.

<Switch>
  <Route exact path="/my-profile" component={MyProfile} />
  <Route exact path="/logout" component={Logout} />
  <Route component={NotFound} />
 </Switch>

For more reference you could read here exact: bool

react router 4 "Not Found" page with nested routes

1 Answers1