I'm using react-router-dom in my reactjs application, and I have this block at the end of my routes to redirect all the wrong paths to this one:

 <Router>
  <React.Suspense fallback={loading}>
    <Switch>
//...all my routes...
//at the end of my routes I have this
     <Route path="*">
      <Redirect to="/dashboard" />
     </Route>
    </Switch>
  </React.Suspense>
 </Router>

If I add a random route like /nonexistentroute it redirects me to /dashboard but, If I'm in a specific route like /home and I click on the refresh button of chrome, I'm being redirected to the /dashboard when it should keep me in the same route. How can I fix it?

I'm using react-router-dom in my reactjs application, and I have this block at the end of my routes to redirect all the wrong paths to this one:

 <Router>
  <React.Suspense fallback={loading}>
    <Switch>
//...all my routes...
//at the end of my routes I have this
     <Route path="*">
      <Redirect to="/dashboard" />
     </Route>
    </Switch>
  </React.Suspense>
 </Router>

If I add a random route like /nonexistentroute it redirects me to /dashboard but, If I'm in a specific route like /home and I click on the refresh button of chrome, I'm being redirected to the /dashboard when it should keep me in the same route. How can I fix it?

• javascript
• reactjs
• http-redirect
• react-router-dom

• Please provide a more plete and prehensive code example so we can see how this route relates to the routes you are rendering. We should be able to see why this route is matched and rendered unconditionally. I suspect you are missing a Switch ponent. stackoverflow./help/minimal-reproducible-example – Drew Reese Commented Jan 21, 2022 at 17:44
• Hello, I fixed my question if you can help me with it. – YaraR Commented Jan 24, 2022 at 8:11
• Your edit appears to agree with the suggested solution from my answer. Are you still having an issue? Where are you rendering this "/nonexistentroute" route? If you are rendering it after your redirect then it won't ever be reachable. – Drew Reese Commented Jan 24, 2022 at 17:32

3 Answers 3

You can use Navigate from latest version of react-router-dom to redirect to a different page.

import React, { Component } from 'react';
import Test_1 from './ponents/Test_1';
import Test_2 from './ponents/Test_2';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import { Navigate } from 'react-router-dom';
class App extends Component {
  render() {
    return (
      <Router>
        <Routes>
          <Route path='/' element={<Test_1 />} />
          <Route path='/home' element={<Test_2 />} />
          <Route path='*' element={<Navigate to='/' />} />
        </Routes>
      </Router>
    );
  }
}

export default App;

Try writing like this if you are using react-router-dom version 6

<Routes>
      <Route path="/" element={<Homepage />} />
      <Route path="*" element={<ErrorPage />} />
</Routes>

From your description it sounds like you are rendering several routes into a router without a Switch ponent. Routers inclusively match and render routes while the Switch exclusively matches and renders the first Route or Redirect ponent. In other words, a router will render all matches, redirects included, the Switch renders only the first.

Wrap your routes in a Switch and place the redirect last in the list so if no other route path was previously matched the Redirect will render.

<Switch>
  ... all other routes ...
  <Redirect to="/dashboard" />
</Switch>

This OFC, all assumes you are still using react-router-dom v5 since you made no mention of any Redirect ponent import errors (Redirect was removed in RRDv6). If this isn't the case and you are actually using RRDv6 then please update your question to include a more plete code example.