Getting an error after using react router

Question

I'm new to react. I'm working on developing my react project. My react components are working fine. When i install react router and use it in app.js i got some error and my webpage got blank! But when i remove react router from app.js page my web page works fine. I don't understand why this happening. Error code are below. It will be helpful if anyone has the solution.

Error code:

react-dom.development.js:26874 Uncaught Error: useHref() may be used only in the context of a <Router> component.
    at invariant (router.ts:5:1)
    at useHref (hooks.tsx:32:1)
    at LinkWithRef (index.tsx:267:1)
    at renderWithHooks (react-dom.development.js:16175:1)
    at updateForwardRef (react-dom.development.js:20023:1)
    at beginWork (react-dom.development.js:22465:1)
    at beginWork$1 (react-dom.development.js:27381:1)
    at performUnitOfWork (react-dom.development.js:26513:1)
    at workLoopSync (react-dom.development.js:26422:1)
    at renderRootSync (react-dom.development.js:26390:1)

Here is my code:

import './App.css';
import Home from './components/pages/Home/Home/Home';
import Header from './components/shared/Header/Header';
import { Route, Routes } from 'react-router-dom';
import Inventory from './components/pages/Inventory/Inventory';

function App() {
  return (
    <div className="App">
      <Header></Header>
      <Routes>
        <Route path='/' element={<Home></Home>}></Route>
        <Route path='/home' element={<Home></Home>}></Route>
        <Route path='/inventory' element={<Inventory></Inventory>}></Route>
      </Routes>
    </div>
  );
}

export default App;

Please provide some code of your implementation to ba able to reproduce your error. — robinood
– robinood, Commented May 4, 2022 at 8:36

Drew Reese · Accepted Answer · 2022-05-05 02:28:12Z

Issue

Uncaught Error: useHref() may be used only in the context of a <Router> component.

This error is informing you that you are attempting to use some react-router-dom functionality outside of any routing context provided by a router. In other words, your app appears to be missing any router component to provide the routing context to the various Link, Routes, and Route components it is rendering.

Solution

Render the app code within a router.

Example:

import './App.css';
import Home from './components/pages/Home/Home/Home';
import Header from './components/shared/Header/Header';
import {
  BrowserRouter as Router, // <-- (1) import router
  Route,
  Routes
} from 'react-router-dom';
import Inventory from './components/pages/Inventory/Inventory';

function App() {
  return (
    <div className="App">
      <Router> // <-- (2) render router around app code
        <Header />
        <Routes>
          <Route path='/' element={<Home />} />
          <Route path='/home' element={<Home />} />
          <Route path='/inventory' element={<Inventory />} />
        </Routes>
      </Router>
    </div>
  );
}

export default App;

rymanso · Accepted Answer · 2022-05-04 09:38:01Z

0

EDIT:

I think all you need is to replace <Routes> with <BrowserRouter>. You might have to add a <Switch> too.

import { BrowserRouter, Switch, Route } from "react-router-dom";

      <BrowserRouter>
        <Switch>
        <Route path='/' element={<Home></Home>}></Route>
        <Route path='/home' element={<Home></Home>}></Route>
        <Route path='/inventory' element={<Inventory></Inventory>}></Route>
        </Switch>
      </BrowserRouter>

edited May 4, 2022 at 9:38

answered May 4, 2022 at 9:14

rymanso

9911 gold badge10 silver badges24 bronze badges

5 Comments

Shahriar Over a year ago

I'm trying to figure this out. Thanks for your explanation

rymanso Over a year ago

Hi, i just edited.. forget my explanation. You might need it one day but maybe not today. hehe

Drew Reese Over a year ago

This answer is incorrect. react-router-dom@6 doesn't export a Switch component, and the Routes component is still required to wrap the Route components so route matching and rendering works.

rymanso Over a year ago

It looks like Switch was replaced with Routes in react-router-dom-6. My answer is not wrong, just dated for react-router-dom@5

Drew Reese Over a year ago

Then this answer is still incorrect since the react-router-dom@5 Route component doesn't take an element prop. The element is a RRDv6 prop and replaced the component, and render and children function props from v5.

Collectives™ on Stack Overflow

Getting an error after using react router

2 Answers 2

Issue

Solution

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Issue

Solution

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related