CODEWITHSUNDEEP
reactjsreact-router-dom
Milos N.
Milos N.

Reputation: 4873

How to display not found page on not define slug ? / React Router DOM

How I can display something like page not found in a define route path, but with not valid slug? Example:

I have defined route with path /about:

<Switch>
   // other routes 
   <Route path="/about" component={AboutPage} />
   <Route component={PageNotFound} />
</Switch>

When I visit link like this : enter image description here

I got about page component, but I have the wrong slug (or not defined) after route (in my case /about), how to catch that and display not found page in example code above.

Thanks. o/

Upvotes: 0

Views: 274

Answers (2)

Ace
Ace

Reputation: 1146

The reason you still get to the About page is because you're still matching the path. If you only want to go to a route if the path match is exact, you can pass the exact flag to the Route: <Route exact path='/about' component={AboutPage} />

Upvotes: 1

ppu
ppu

Reputation: 66

not sure if I understood you fully, but are you aiming to achieve something like in this exact & strict example?

So for localhost:3000/about you'd see the about page, but for localhost:3000/about/sth you'd get redirected to /?

Upvotes: 0

Related Questions