0

In React Router v5, there was a <Redirect> component that you could use to redirect the user from one route to another as shown below:

import React from 'react';
import { Switch, Route, Redirect } from 'react-router-dom';
// ...

function App() {
  // ...

  return (
    <div>
      <Header />
      <Switch>
        <Route path="/" element={<HomePage />} />
        <Route path="/project" element={<Redirect to="/project/list" />} />
        <Route path="/project/list" element={<ProjectListPage />} />
      </Switch>
      <Footer />
    </div>
  );
}

export default App;

However this produces the following error with v6:

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

Currently the top search result, when I look for "react router redirect" is: https://v5.reactrouter.com/web/api/Redirect

Which is clearly outdated.

Drew Reese
  • 165,259
  • 14
  • 153
  • 181
Paul Smith
  • 166
  • 3
  • 13
  • 1
    Also, FYI, the `Switch` component was replaced by the `Routes` component. See the [Upgrade from v5](https://reactrouter.com/docs/en/v6/upgrading/v5) guide for other breaking changes between versions. – Drew Reese Jun 11 '22 at 20:55

1 Answers1

0

The APIs changed drastically in React Router v6. However the change here seems to be pretty simple, just replace the old <Redirect> component with the new <Navigate> component.

import React from 'react';
import { Routes, Route, Navigate } from 'react-router-dom';
// ...

function App() {
  // ...

  return (
    <div>
      <Header />
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/project" element={<Navigate to="/project/list" />} />
        <Route path="/project/list" element={<ProjectListPage />} />
      </Routes>
      <Footer />
    </div>
  );
}

export default App;

You can find the updated documentation for React Router v6 here: https://reactrouter.com/docs/en/v6/components/navigate

And a full upgrade guide here: https://reactrouter.com/docs/en/v6/upgrading/v5#

Paul Smith
  • 166
  • 3
  • 13
  • 1
    This is also covered in their [upgrade from v5 to v6 documentation](https://reactrouter.com/docs/en/v6/upgrading/v5#use-usenavigate-instead-of-usehistory) – super Jun 11 '22 at 13:50