I want to use useNavigation() from react-router-dom, but I get the following error:

Error: useNavigation must be used within a data router.
See https://reactrouter.com/en/main/routers/picking-a-router.

NavBar
src/components/NavBar.js:6
  3 | import { useNavigation } from "react-router-dom";
  4 | 
  5 | function NavBar() {
> 6 |   const navigate = useNavigation();
  7 |   const handleClick = (e) => {
  8 |       navigate("/login");
  9 |   };

But I wrapped my whole app with BrowserRouter like this:

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { BrowserRouter as Router } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
    <React.StrictMode>
        <Router>
            <App />
        </Router>
    </React.StrictMode>
);

I also use routes like below:

import SideMenu from "./components/SideMenu";
import Content from "./components/Content";
import Projects from "./pages/Projects";
import { Routes, Route } from "react-router-dom";

function App() {
    return (
        <div className="App">
            <Routes>
                <Route exact path="/" element={<div>Home</div>} />
                <Route path="/login" element={<Login />} />
                <Route path="/signin" element={<SignUp />} />
                <Route path="/projects" element={<Projects />} />
                <Route
                    path="/main"
                    element={
                        <Main
                            nav={<NavBar />}
                            sideMenu={<SideMenu />}
                            content={<Content />}
                        />
                    }
                />
            </Routes>
        </div>
    );
}

And my NavBar component looks like this:

import React from "react";
import "./NavBar.css";
import { useNavigation } from "react-router-dom";

function NavBar() {
    const navigate = useNavigation();
    const handleClick = (e) => {
        navigate("/login");
    };
    return (
        <div className="navbar">
            <ul className="nav-list">
                <li className="nav-item">
                    <button className="nav-login" onClick={handleClick}>
                        Login
                    </button>
                </li>
            </ul>
        </div>
    );
}

So in the end, my NavBar component is within the BrowserRouter, but according to the error I understand it's not the case. Does anyone has a solution for this case?

CodePudding user response：

The useNavigation hook is a Data Router only hook. You are not using a Data router, but rather you are using the regular BrowserRouter. In other words, you are using BrowserRouter directly instead of one created by createBrowserRouter.

useNavigation

This feature only works if using a data router, see Picking a Router

Since you are wanting to issue imperative navigation actions use the useNavigate hook instead.

useNavigate

The useNavigate hook returns a function that lets you navigate programmatically

import { useNavigate } from "react-router-dom";

function NavBar() {
  const navigate = useNavigate();

  const handleClick = (e) => {
    navigate("/login");
  };

  return (
    <div className="navbar">
      <ul className="nav-list">
        <li className="nav-item">
          <button className="nav-login" onClick={handleClick}>
            Login
          </button>
        </li>
      </ul>
    </div>
  );
}