javascript - How to use Routes and Redirect from same npm package react-router-dom?

Question

I wanted to use 3 things from react-router-dom to implement router in my application i.e. Routes, useNavigate and Redirect. But the problem is Routes and useNavigate is not available in react-router-dom 5.2.0. So, i installed react-router-dom v6.0.0-alpha.1 in order to use Routes and useNavigate. But the problem is Redirect is removed from react-router-dom v6.0.0-alpha.1. Now i don't understand how i am going to use Routes, useNavigate and Redirect under specific react-router-dom

import React, { lazy, Suspense, useEffect } from "react";
import { Routes, Route, useNavigate, useLocation, Redirect } from "react-router-dom";
import { Loader } from "../common";
import HTML5Backend from "react-dnd-html5-backend";
import { DragDropContext } from "react-dnd";

const StudentList = lazy(() => import("../pages/StudentList"));
const About = lazy(() => import("../pages/About"));

const App = () => {
  const navigate = useNavigate();
  const currentModule = "/" + useLocation().pathname.split("/")[1];
  const onLoad = () => {
    navigate(currentModule);
  };

  useEffect(onLoad, []);
  return (
    <>
      <Suspense fallback={<Loader />}>
        <Routes>
          {[
            <Route
              key="/student"
              path="/studentlist/*"
              element={<StudentList />}
            />,
            <Route key="/about" path="/about/*" element={<About />} />,
            <Redirect key="redirect" from="/" to="/studentlist" />,
          ]}
        </Routes>
      </Suspense>
    </>
  );
};

App.displayName = "App";

export default DragDropContext(HTML5Backend)(App);

question from:https://stackoverflow.com/questions/65902269/how-to-use-routes-and-redirect-from-same-npm-package-react-router-dom

Answer 1

Short answer: use <Navigate> instead of <Redirect>.

According to the release info, Redirect was removed in v6.0.0-alpha.3 (but as this is still alpha, I can imagine it was already broken in alpha.1). It also describes the reason for the removal:

React won't let us change the state in an ancestor component on the initial render w/out warning, so we had to remove the component, as well as the ability to do a navigate() on the initial render. You can still render a , but it won't actually update the page until the next render.

If you really need to redirect on the initial render, you can either a) do it on your server (probably best, so it can be cached at the HTTP level instead of doing it in every user's browser) or b) do it outside of React Router (e.g. using the history API directly).

So it is not possible to use both Redirect and useNavigate.

But there is a migration guide V5 to V6, which states that you need to use <Navigate> instead of <Redirect>:

If you prefer to use a declarative API for navigation (ala v5's Redirect component), v6 provides a Navigate component. Use it like:

import { Navigate } from 'react-router-dom';

function App() {
    return <Navigate to="/home" replace state={state} />;
}