Getting an error after using react router

[Amjad-722]

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 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 (

<Route path='/' element={}>
<Route path='/home' element={}>
<Route path='/inventory' element={}>

);
}

export default App;

[m-saqlain024]

Issue
Uncaught Error: useHref() may be used only in the context of a 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 (

// <-- (2) render router around app code


<Route path='/' element={} />
<Route path='/home' element={} />
<Route path='/inventory' element={} />

);
}

export default App;