How do I implement redirects in React Router?

How do I implement redirects in React Router?

You can implement redirects in React Router using the <Navigate> component or the Redirect component in older versions.

Can you show me an example of using the <Navigate> component?

Sure! Here's a simple example:

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

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/old-path" element={<Navigate to="/new-path" replace />} />
        <Route path="/new-path" element={<NewComponent />} />
      </Routes>
    </Router>
  );
}

What does the replace prop do in the <Navigate> component?

The replace prop, when set to true, replaces the current entry in the history stack instead of adding a new one. This means that the user won't be able to go back to the old path using the back button.