Categories
React Answers

How to fix ‘Redirect’ is not exported from ‘react-router-dom’ with React Router v6?

Spread the love

Sometimes, we want to fix ‘Redirect’ is not exported from ‘react-router-dom’ with React Router v6.

In this article, we’ll look at how to fix ‘Redirect’ is not exported from ‘react-router-dom’ with React Router v6.

How to fix ‘Redirect’ is not exported from ‘react-router-dom’ with React Router v6?

To fix ‘Redirect’ is not exported from ‘react-router-dom’ with React Router v6, we should import Navigate instead of Redirect.

For instance, we write

import {
  BrowserRouter as Router,
  Routes,
  Route,
  Navigate,
} from "react-router-dom";
import Home from "../home/Home";

export default function App() {
  return (
    <Router>
      <Routes>
        <Route path="/home" element={<Home />} />
        <Route path="/" element={<Navigate replace to="/home" />} />
      </Routes>
    </Router>
  );
}

to use the Navigate component to redirect to the /home route when we go to / as specified by

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

Conclusion

To fix ‘Redirect’ is not exported from ‘react-router-dom’ with React Router v6, we should import Navigate instead of Redirect.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *