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

avatar

Borislav Hadzhiev

Last updated: Apr 20, 2022

banner

Photo from Unsplash

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

To solve the error "export 'Redirect' (imported as 'Redirect') was not found in 'react-router-dom'", use the Navigate component instead of Redirect, e.g. <Navigate to="/dashboard" replace={true} />. The Navigate component changes the current location when it's rendered.

export redirect was not found in react router dom

App.js
import React from 'react'; // 👇️ import Navigate instead of 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> ); }

In version 6 of react router, the Redirect component is replaced with Navigate.

When the Navigate component is rendered, it changes the current location.

The component is a wrapper for the useNavigate hook which enables us to navigate programmatically.

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

You can also pass the Navigate component as the element prop of a Route.

App.js
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 Navigate component also takes a replace prop which allows us to replace the current entry in the history stack.

App.js
import React from 'react'; // 👇️ import Routes instead of 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> ); }

When the replace prop is set to true, the current entry in the history stack gets replaced with the new one.

In other words, navigating to the new route won't push a new entry into the history stack, so if the user clicks the back button, they won't be able to navigate to the previous page.

This is useful, for example, when a user logs in - you don't want them to be able to click the back button and get back to the login page.

Or if you have a route that redirects uses to a different page - you don't want users to click the back button and get redirected again.

Conclusion #

To solve the error "export 'Redirect' (imported as 'Redirect') was not found in 'react-router-dom'", use the Navigate component instead of Redirect, e.g. <Navigate to="/dashboard" replace={true} />. The Navigate component changes the current location when it's rendered.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.