How to remove unhandled path URL from ReactJS

Question

Disclaimer: I'm pretty sure this is a duplicate, because there's no way no one asked this, but I don't know if i searched the wrong terms or so but I couldn't find an answer, so I'll ask here.

I'm using React routers (react-router-dom), so for example if I set:

<Route path='/home' component={Home} />

At this point, obviously, if I go to localhost:3000/home it will load my homepage, right? But if I go to localhost:3000/fjnisodjuhfosij (just random text) it will load anyway a blank page, it won't say something like "this page doesn't exist" or just redirecting to the home. How can I handle this? Thank you

Viet · Accepted Answer · 2021-09-01 09:27:50Z

1

Just add Route with path '*':

<Route path='*' component={YourComponent} />

answered Sep 1, 2021 at 9:27

Viet

12.9k2 gold badges18 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

palindrom · Accepted Answer · 2021-09-01 09:32:38Z

1

To direct to home: Add this as the last route in switch: <Route><Redirect to="/home"/></Route>

Or, to show a 404 error page: Create a component for the error page (NotFound lets say) and add it as the last route: <Route component={NotFound} />

answered Sep 1, 2021 at 9:32

palindrom

19.3k1 gold badge23 silver badges40 bronze badges

2 Comments

giuseppe Over a year ago

this works fine, but now i got a new problem, I set a route on / that redirects to home and a route that redirects to not found, but now every unknow route, just get redirected to home.

palindrom Over a year ago

Could you share the whole <Router> part? You should useexact for the route /.

Collectives™ on Stack Overflow

How to remove unhandled path URL from ReactJS

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related