Getting an error after using react router

user_18916283 0
Viewed 908

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;
react-router-dom react-router reactjs
2 Answers

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;
user_86908570

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>
user_67164210
Related