Export ‘Redirect’ (imported as ‘Redirect’) was not found in ‘react-router-dom’ is a common error that many users encounter. It happens in many ways. What is the cause of it and how to fix it? In this article, we will give you some methods to fix this problem. Read on.

How Does The Error “Export ‘Redirect’ (imported as ‘Redirect’) was not found in ‘react-router-dom'” Occur?

When you run your program, you easily get the following warning message:

Export 'Redirect' (imported as 'Redirect') was not found in 'react-router-dom'

How To Solve The Error “Export ‘Redirect’ (imported as ‘Redirect’) was not found in ‘react-router-dom'”?

The interactions that let users move inside and outside the various pieces of content in your app are referred to as navigation. The Navigation component of Android Jetpack assists you in implementing navigation, from straightforward button clicks to more intricate patterns like app bars and the navigation drawer. By abiding by a predetermined set of guidelines, the Navigation component also makes sure that the user experience is predictable and consistent.

In earlier versions of the react-router-dom package, the Redirect component is typically used to rapidly do redirects by simply importing the component from react-router-dom and specifying the to prop to use the component, which specifies the page you want to redirect to.

import { Redirect } from 'react-router-dom'; 
<Route path='/redirect-page' element={ <Redirect to="/error-page" /> }/>

To fix the error “Export ‘Redirect’ (imported as ‘Redirect’) was not found in ‘react-router-dom'”, you need to use the Navigate component rather than Redirect, for example <Navigate to=”/dashboard” replace={true} />.

The Navigate component, which performs the same function as the Redirect component by accepting the to prop to enable you to redirect to the page you choose, was introduced with React Router v6 and replaced the Redirect component.

When Navigate component is rendered, its current location changes.

import React from 'react'; 
// import Navigate rather than Redirect 
import {Navigate} from 'react-router-dom'; 
export default function App() { 
  const user = {id: 1, name: 'James Doe'}; 
  return ( 
    <div> 
      {user && <Navigate to="/dashboard" />} 
    </div> 
  ); 
}

The Navigate component has been added to React Router version 6 in favor of the Redirect one. The current location is changed when the Navigate component is supplied. The element serves as a wrapper for the useNavigate hook, which enables programmatic navigation.

// import useNavigate as below 
import {useNavigate} from 'react-router-dom'; 
export default function App() { 
  const navigate = useNavigate(); 
  const handleClick = () => { 
    // programmatically navigate 
    navigate('/about'); 
  }; 
  return ( 
    <div> 
      <button onClick={handleClick}>Navigate to About</button> 
    </div> 
  ); 
}

The Navigate component can also be sent as a Route’s element prop.

import React from 'react'; 
import { 
  Navigate, 
  Route, 
  Routes, 
} from 'react-router-dom'; 
export default function App() { 
  return ( 
    <div> 
      <Routes> 
        <Route path="/" element={<Navigate to="dashboard" />} /> 
     </Routes> 
    </div> 
  ); 
}

The replace prop, which the Navigate component also accepts, enables you to change the current history stack entry.

import React from 'react'; 
// import Routes rather than Switch 
import {Navigate} from 'react-router-dom'; 
export default function App() { 
  const user = {id: 1, name: 'James Doe'}; 
  return ( 
    <div> 
      {user && <Navigate to="/dashboard" replace={true} />} 
    </div> 
   ); 
}

The current entry in the history stack is replaced with the new one when the replace prop is set to true. In other words, going to the new route won’t add a new item to the history stack, making it impossible for the user to return to the previous page by clicking the back button. This is helpful, for instance, if you don’t want users to be able to use the back button to return to the login page after logging in. Additionally, you don’t want people to click the back button and be redirected to the same page if your route takes them to a different page.

Conclusion

The solutions presented above are the best solutions for ”Export ‘Redirect’ (imported as ‘Redirect’) was not found in ‘react-router-dom’” error. We hope this blog has helped clear the air around how to do it. If you have more questions about this topic, please leave a comment below. Thank you for reading, we are always excited when one of our posts can provide useful information on a topic like this!

Read more

→ Failed to compile ./src/components/App/App.js Module not found: Can’t resolve ‘react-router-dom’ – How To Fix It?