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 beginWork1ドル (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;

• robinood: Please provide some code of your implementation to ba able to reproduce your error.
• Jai Saravanan: Please add your code for any exapmle

Answer 1

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;

Answer 2

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>

• Shahriar: I'm trying to figure this out. Thanks for your explanation
• rymanso: Hi, i just edited.. forget my explanation. You might need it one day but maybe not today. hehe
• Drew Reese: 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: 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: 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.