How to Use Redirect in Version 5 of React-Router-Dom of Reactjs

How to use Redirect in version 5 of react-router-dom of Reactjs

You have to use setState to set a property that will render the <Redirect> inside your render() method.

E.g.

class MyComponent extends React.Component {
  state = {
    redirect: false
  }

  handleSubmit () {
    axios.post(/**/)
      .then(() => this.setState({ redirect: true }));
  }

  render () {
    const { redirect } = this.state;

     if (redirect) {
       return <Redirect to='/somewhere'/>;
     }

     return <RenderYourForm/>;
}

You can also see an example in the official documentation: https://reacttraining.com/react-router/web/example/auth-workflow

---

That said, I would suggest you to put the API call inside a service or something. Then you could just use the history object to route programatically. This is how the integration with redux works.

But I guess you have your reasons to do it this way.

Router and redirect in React.js

Almost all the react-router-dom tutorials out there are outdated and still refer to the react-router-dom@5 API spec.

It looks like you've accidentally upgraded/installed the latest version of react-router-dom, version 6. You've two options from here:

1. Downgrade/revert back to version v5.x

   Uninstall any current versions of react-router-dom and react-dom, and then install a specific v5 version of them.

   From your project directory run:

   • 
     

     npm un -s react-router-dom react-dom
     

   • 
     

     npm i -s react-router-dom@5 react-dom@5
     

2. Complete/apply the v5 migration guide

   Upgrading from v5

   If you decide to move forward with the migration then you'll likely want to uninstall react-router since react-router-dom re-exports all the exports from react-router, or at a minimum you want to ensure it's on the same version.

   Uninstall:

   npm un -s react-router
   

   Or reinstall latest of each:

   • 
     

     npm un -s react-router-dom react-router
     

   • 
     

     npm i -s react-router-dom@latest
     

   App

   import {Route, Switch} from "react-router-dom"
   
   function App(props) {
     return (
       <div>
         <Header />
         <Routes>        
           <Route path="/" element={<Home />} />
           <Route path="authentication" element={<Authentication />} />
           <Route path="/dashboard-component" element={<DashboardComponent />} />
         </Routes>
       </div>
     );
   }
   

   Authentication

   const Authentication = () => {
   
     --- other code ---
   
     let postLoginRedirect = null;
     if (isLogged) {
       return <Navigate to="/dashboardComponent" replace />;
     }
     return(
       <div>
         ...
       </div>
     );
   }
   

What is the alternative for Redirect in react-router-dom v 6.0.0?

Redirecting alone is done via the Navigate component with the replace prop specified.

<Navigate replace to="/" />

If you want to replicate RRDv5's Redirect component redirecting from a path then you need to combine with a Route.

<Route path="/somePath" element={<Navigate replace to="/" />} />

• Navigate
• Routes & Route

Redirect after completing an action with react-router-dom V5.+

if you are using hooks, use react-router doms useHistory hook https://reactrouter.com/web/api/Hooks

for example:

import { useHistory } from "react-router-dom";

function HomeButton() {
  let history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

React: 'Redirect' is not exported from 'react-router-dom'

For react-router-dom v6, simply replace Redirect with Navigate

import { Navigate } from 'react-router-dom';
.
.
.
{ component: () => <Navigate to="/404" /> }

How to do a redirect to another route with react-router?

For the simple answer, you can use Link component from react-router, instead of button. There is ways to change the route in JS, but seems you don't need that here.

<span className="input-group-btn">
  <Link to="/login" />Click to login</Link>
</span>

To do it programmatically in 1.0.x, you do like this, inside your clickHandler function:

this.history.pushState(null, 'login');

Taken from upgrade doc here

You should have this.history placed on your route handler component by react-router. If it child component beneath that mentioned in routes definition, you may need pass that down further

How can I redirect in React Router v6?

I think you should use the no match route approach.

Check this in the documentation: Adding a "No Match" Route

import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/lab" element={<Lab />} />
    <Route
        path="*"
        element={<Navigate to="/" replace />}
    />
  </Routes>
</BrowserRouter>

To keep the history clean, you should set replace prop. This will avoid extra redirects after the user click back.

---

Related Topics