Question 240812 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – useNavigate() may be used only in the context of a <Router> component. react-router-dom version 6.12.0

useNavigate() may be used only in the context of a <Router>
component.

react-router-dom version is ^6.12.0.

As shown above in attached image, we have a problem.
What do you recommend to do?**

Header

Merchant button on navbar is not working when it is clicked.

See my code.

import React from "react";
import "./css/header.css";
import { Menu } from "antd";
import { Link, useNavigate } from "react-router-dom";

const items = [
  { label: "Merchants", path: <Link to="/merchant" />, key: "merchant" },
  { label: "Customers", path: <Link to="/customer" />, key: "customer" },
];

const Header = () => {
  let navigate = useNavigate();

  const handleMenuClick = ({ key }) => {
    if (key) {
      console.log(key)
      navigate(key);
    }
  };

  return (
    <div className="cc-nav">
      <div className="cc-nav-body">
        <Menu
          defaultSelectedKeys={["/merchant"]}
          mode="horizontal" items={items}
          onClick={handleMenuClick}
        />
      </div>
    </div>
  );
};

export default Header;

routes.js file

import React from "react";
const Dashboard = React.lazy(() => import('../containers/TheContent'));
const Merchant = React.lazy(() => import('../pages/merchant/pages/Merchant'));

const routes = [
  { path: '/', name: 'Dashboard', element: <Dashboard /> },
  { path: '/merchant', name: 'Merchant', element: <Merchant /> },
]

export default routes;

App.js file

import 'antd/dist/antd';
import { ConfigProvider } from "antd";
import './App.css';
import TheLayout from "./containers/TheLayout";
import { Suspense } from "react";
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import routes from './router/routes';

function App() {
  return (
      <div className="App">
        <ConfigProvider
             theme={{token: {
                colorPrimary: "#3b2eed"
              }}}
        >
          <TheLayout>
              <BrowserRouter>
                  <Suspense>
                      <Routes>
                          {routes.map(route => {
                              return <Route
                                  key={route.path}
                                  path={route.path}
                                  name={route.name}
                                  element={route.element}
                              />
                          })}
                      </Routes>
                  </Suspense>
              </BrowserRouter>
          </TheLayout>
        </ConfigProvider>
      </div>
  );
}

export default App;

I’m trying to add this button that goes back to the previous page using react-router-dom but I get the below error, and also all the components on my website disappear.

Tags:

2

Answers


  1. 0

    The useNavigate hook can only be used within a functional component to provide navigation functionality. In your code, you’re trying to use useNavigate outside the Header functional component.

    To fix this issue, you should move the useNavigate hook inside the Header component where you intend to use it. Here’s the modified code:

    import React from "react";
import "./css/header.css";
import { Menu } from "antd";
import { Link, useNavigate } from "react-router-dom";

const items = [
  { label: "Merchants", path: "/merchant", key: "merchant" },
  { label: "Customers", path: "/customer", key: "customer" },
];

const Header = () => {
  const navigate = useNavigate(); // Move useNavigate here

  const handleMenuClick = ({ key }) => {
    if (key) {
      console.log(key);
      navigate(key);
    }
  };
  return (
    <div className="cc-nav">
      <div className="cc-nav-body">
        <Menu
          defaultSelectedKeys={["/merchant"]}
          mode="horizontal"
          items={items}
          onClick={handleMenuClick}
        />
      </div>
    </div>
  );
};

export default Header;

    By moving the useNavigate hook inside the Header component, you ensure that it’s used within the proper context of a functional component, and it should work as expected.

    Login or Signup to reply.
  2. 0

    Based on the error I’m guessing you are rendering the Header component in the TheLayout component which is outside the routing context provided by the BrowserRouter.

    Move BrowserRouter higher in the ReactTree such that all react-router-dom routes, links, hooks have the routing context available to them.

    function App() {
  return (
    <BrowserRouter> // <-- render higher in tree
      <div className="App">
        <ConfigProvider
          theme={{
            token: {
              colorPrimary: "#3b2eed"
            }
          }}
        >
          <TheLayout> // <-- than components that may need routing context
            <Suspense>
              <Routes>
                {routes.map(route => (
                  <Route key={route.path} {...route} />
                ))}
              </Routes>
            </Suspense>
          </TheLayout>
        </ConfigProvider>
      </div>
    </BrowserRouter>
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search