Redirect wrong behavior in react-router-dom

user_6274504 0
Viewed 803

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?

react-router-dom reactjs redirect javascript
3 Answers

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

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

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 './components/Test_1';
import Test_2 from './components/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;
user_129813530

From your description it sounds like you are rendering several routes into a router without a Switch component. Routers inclusively match and render routes while the Switch exclusively matches and renders the first Route or Redirect component. 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 component 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 complete code example.

user_86908570
Related