How to go back to react router v5 from react router v6 for nested dashboard?

user_16858385 0
Viewed 1772

I need to go back to follow a old nested routing tutorial but I started with v6

import {
  BrowserRouter as Router,
  Route,
  Routes,
  useNavigate
} from "react-router-dom";
import ReactDOM from "react-dom";

const Dash = () => {
    const navigate = useNavigate();
    return (
    <div>
        <h1>Dash</h1>
        <button onClick={() => navigate("/makeAdmin")}>Make Admin</button>
    </div>
)};
react-router reactjs
1 Answers

  1. Uninstall the current version of react-router-dom

    npm uninstall -s react-router-dom or npm un -s react-router-dom

  2. Install a specific v5 version

    npm install -s react-router-dom@5.3.0 or npm i -s react-router-dom@5.3.0

Update the code to use the v5 components.

import {
  BrowserRouter as Router,
  Route,
  Switch, // was Routes
  useHistory, // was useNavigate
} from "react-router-dom";
import ReactDOM from "react-dom";

const Dash = () => {
  const history = useHistory();
  return (
    <div>
      <h1>Dash</h1>
      <button onClick={() => history.push("/makeAdmin")}>
        Make Admin
      </button>
    </div>
  );
};
user_86908570
Related