Error: useHref() may be used only in the context of a component. It works when I directly put the url as localhost:3000/experiences

by

Issue

You are rendering the navbar outside the routing context. The Router isn’t aware of what routes the links are attempting to link to that it is managing. The reason routing works when directly navigating to "/experiences" is because the Router is aware of the URL when the app mounts.

<Navbar /> // <-- outside router!!

<Router>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/experiences" element={<Experiences />} />
  </Routes>
</Router>

Solution

Move it inside the routing context so the Router is aware and can manage routing correctly.

<Router>
  <Navbar />
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/experiences" element={<Experiences />} />
  </Routes>
</Router>

[email protected] Data APIs

If you are using the new Data routers you can hit this issue if you attempt to render a header/navbar outside the RouterProvider component. For this you can create a layout route that is part of the routing configuration passed to createBrowserRouter (and other variants).

Example:

const AppLayout = () => (
  <>
    <Navbar />
    <Outlet />
  </>
);

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route element={<AppLayout />}>
      <Route path="/" element={<Home />} />
      <Route path="/experiences" element={<Experiences />} />
    </Route>
  )
);

…

<RouterProvider router={router} />

More Related Contents:

  1. React : difference between and
  2. How to create a protected route?
  3. React-router-v6 access a url parameter
  4. React Router v4 renders multiple routes
  5. How to pass params into link using React router v6?
  6. react-router-dom v6 useNavigate passing value to another component
  7. Detect Route Change with react-router
  8. Simple Conditional Routing in Reactjs
  9. Cannot read property ‘history’ of undefined (useHistory hook of React Router 5)
  10. Invariant failed: You should not use outside a
  11. useNavigate() may be used only in the context of a component
  12. React Router Dom v6 shows active for index as well as other subroutes
  13. React – TypeError: Cannot read properties of undefined (reading ‘params’)
  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 push to History in React Router v4?
  21. How to pass params with history.push/Link/Redirect in react-router v4?
  22. How to get history on react-router v4?
  23. React router changes url but not view
  24. React Router v4 – How to get current route?
  25. You should not use outside a
  26. Uncaught TypeError: Cannot read property ‘push’ of undefined (React-Router-Dom)
  27. react router v4 default page(not found page)
  28. Nested Routes not rendering with React Router v4
  29. React router, pass data when navigating programmatically?
  30. react router v6 No routes matched location

Leave a Comment