React Router prevent random route

Question

How would I structure a React-Router switch statement to prevent anything from happening if the user enters an unmatched route? In other words, I don't want a 404 not found page; I just want nothing to happen and the current url doesn't change.

Here's my switch statement:

 <Switch>
    <Route path="/" exact>
      <LandingPage />
    </Route>
    <Route path="/login" exact>
      <LandingPage />
    </Route>
    <Route path="/new-account" exact>
      <LandingPage />
    </Route>

    <Route path="/account-settings" exact>
      <AccountSettings />
    </Route>

   
    <Route path="/dashboard" exact>
      <Dashboard userStatus={userStatus} />
    </Route>
    
    <Route path={"*"}>
      {/* Could I somehow achieve this here? */}
    </Route>
  </Switch>

What if the user starts on a non-existent page and no previous page exists? — mousetail
– mousetail, Commented Sep 25, 2021 at 12:24

nima · Accepted Answer · 2021-09-25 12:35:37Z

2

you can implement another page(view) with a custom hook and place it here:

    <Route path={"*"}>
      {/* Could I somehow achieve this here? */}
    </Route>

new component for your * routes:

function RedirectHook() {
  history = useHistory() // which imported from react-router-dom
  useEffect(() => {
    history.goBack();
  })

  return null
}

now every page that does not exist on your routes list will be pushed to RedirectHook and then sent back to the original page.

answered Sep 25, 2021 at 12:35

nima

8,99312 gold badges40 silver badges55 bronze badges

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

1 Comment

George25 Over a year ago

tried this and it worked quite well

Nishant Bhosale · Accepted Answer · 2021-09-25 12:25:32Z

1

You can use the Redirect component of react-router-dom to redirect the user whenever he hits an unknown endpoint.

answered Sep 25, 2021 at 12:25

Nishant Bhosale

2511 silver badge12 bronze badges

1 Comment

Noam Yizraeli Over a year ago

this answer was flagged for low quality, please better the answer with more supporting info and an explanation

Collectives™ on Stack Overflow

React Router prevent random route

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related