How to redirect to home page if URL is invalid?

Question

I am using React and React-router v4

Here is my route component:

<Switch>
              {/* <Route path='/blog' exact component={Blog} /> */}
              <Route path='/projects/:id' component={ProjectDetails} />
              <Route path='/career/:id' component={CareerDetails} />
              <Route path='/' component={withScrollPreservation(LandingPage)} />
              <Route component={withScrollPreservation(LandingPage)} />
            </Switch>

What is my question:

If user types something that is not valid from routes give I want it to redirect to home page. Consider this scenario running this locally:

localhost:4000/ - home page

localhiost:4000/invalidurl - should redirect back to localhost:4000/ and deleteting invalidurl from url

Any thoughts?

You can make use of [Redirect](https://reacttraining.com/react-router/web/api/Redirect) component — Shubham Khatri, Nov 19 '18 at 13:02
@ShubhamKhatri - I am having an issue when user entered manually on the browser like localhost:9090/{invalidurl}/{invalidUrl} . I have raised the question as well , link is https://stackoverflow.com/questions/64261462/react-router-dom-redirect-is-not-working-for-nested-routes-eg-localhost90 . Please give some idea , how to do it, — SakthiSureshAnand, Oct 11 '20 at 10:55

score 10 · Accepted Answer · edited Jan 27 '19 at 16:40

10

You can use

import { Redirect } from 'react-router-dom';

and add this route inside your switch:

<Route render={() => <Redirect to={{pathname: "/"}} />} />

It'll catch anything that has no route.

edited Jan 27 '19 at 16:40

wvdz

16,251
4
53
90

answered Nov 19 '18 at 13:24

MWO

2,627
2
10
25

For me this did redirect but wouldn't display the component in the ```exact path="/"``` – J.E.C. Nov 23 '20 at 07:42
1

Make sure this route is the last element of your switch – Mahen Gandhi Feb 25 '21 at 13:33
1

There's a slight problem with this answer, when the user reloads the page they're redirected to the above path. So this `` when reloaded will take you to `path="/"` – SamWanekeya Nov 09 '21 at 19:42

score 7 · Answer 2 · answered Nov 19 '18 at 13:41

7

If you want to redirect home page when type invalid path string so that follow this code....

<Switch>
   <Route exact path="/" component={Home} />
   <Route path="/login" component={Login} />
   <Route path="/signup" component={Signup} />
   <Route path="/user" component={User} onEnter={this.requireAuth}/>
   <Route path="*" component={Home} />
</Switch>

here i used * in path that means if invalid path string type then it auto redirect to home page.

answered Nov 19 '18 at 13:41

Neel Patel

2,028
18
17

Thank you for reply, I've used previous solution and it worked like a charm, But thank you a lot as well! – Rostyslav Skyba Nov 19 '18 at 14:14

How to redirect to home page if URL is invalid?

2 Answers2