useNavigate() may be used only in the context of a component

by

This error throws in useNavigate. useInRouterContext will check if the component(which uses useNavigate hook) is a descendant of a <Router>.

Here’s the source code to explain why you can’t use useNavigate, useLocation outside of the Router component:

useNavigate uses useLocation underly, useLocation will get the location from LocationContext provider. If you want to get the react context, you should render the component as the descendant of a context provider.
Router component use the LocationContext.Provider and NavigationContext.Provider. That’s why you need to render the component as the children, so that useNavigate hook can get the context data from NavigationContext and LocationContext providers.

Your environment is browser, so you need to use BrowserRouter. BrowserRouter is built based on Router.

Refactor to this:

App.jsx:

function App() {
  const navigate = useNavigate();
  return (
      <div>
        <button onClick={() => navigate(-1)}>go back</button>
        <Nav/>
        <Routes>
          <Route exact path="/" element={<Home/>}/>
          <Route exact path="/home" element={<Home/>}/>
          <Route exact path="/upcoming/:user" element={<Upcoming/>}/>
          <Route exact path="/record/:user" element={<Record/>}/>
          <Route path="*" element={<NotFound/>}/>
        </Routes>
      </div>
  );
}

index.jsx:

import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

ReactDOM.render(
  <BrowserRouter>
    <App/>
  </BrowserRouter>,
  document.getElementById('root')
)

More Related Contents:

  1. Cannot read property ‘history’ of undefined (useHistory hook of React Router 5)
  2. React : difference between and
  3. How to create a protected route?
  4. React-router-v6 access a url parameter
  5. React Router v4 renders multiple routes
  6. How to pass params into link using React router v6?
  7. react-router-dom v6 useNavigate passing value to another component
  8. Detect Route Change with react-router
  9. Simple Conditional Routing in Reactjs
  10. Invariant failed: You should not use outside a
  11. React Router Dom v6 shows active for index as well as other subroutes
  12. React – TypeError: Cannot read properties of undefined (reading ‘params’)
  13. Error: useHref() may be used only in the context of a component. It works when I directly put the url as localhost:3000/experiences
  14. react app showing empty page when redirecting on production build
  15. React App goes blank after importing React-Router-Dom
  16. React Router 4 Nested Routes not rendering
  17. Children won’t render when using a layout in ReactJS
  18. How to go back to previous route in react-router-dom v6
  19. React Router V6 – Error: useRoutes() may be used only in the context of a component
  20. How to pass params with history.push/Link/Redirect in react-router v4?
  21. How to get history on react-router v4?
  22. React Router v4 – How to get current route?
  23. Understanding the React Hooks ‘exhaustive-deps’ lint rule
  24. How to sync props to state using React hooks : setState()
  25. Lazy initial state – What it is and how to use it?
  26. react router v6 No routes matched location
  27. What is the expected return of `useEffect` used for?
  28. ReactJS – prevState in the new useState React hook?
  29. You cannot render a inside another . You should never have more than one in your app
  30. React – Is useState ‘s setter function able to change?

Leave a Comment