how can i use Route without getting any errors like this

Guys i’m trying to work on my navigation bar and use route but it always shows errors

I don’t know the reason but it isn’t convinced with the routes at all and the error is

    "index.tsx:19 Uncaught Error: useRoutes() may be used only in the context of a <Router> 
     component.
    at invariant (index.tsx:19)
    at useRoutes (index.tsx:637)
    at Routes (index.tsx:339)
    at renderWithHooks (react-dom.development.js:14985)
    at mountIndeterminateComponent (react-dom.development.js:17811)
    at beginWork (react-dom.development.js:19049)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork$1 (react-dom.development.js:23964)
    "

below is my app.jsx code

import React, { Component } from 'react';
import Home from './home';
import {Route,Routes} from "react-router-dom"

class App extends React.Component {
render() { 
    return (
    <React.Fragment>
        
        <Routes>
            <Route path="/home" element={<Home />} />
        </Routes>
    
    
    
    </React.Fragment>
    
    
    );
 }
}

export default App;

and my navigation is this code as well

import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';
import"./home.css";

const Home = () => {
 return (
<React.Fragment>
    <nav className="navbar navbar-expand-lg ">
         <div className="container-fluid">
            <i className="fas fa-paw fa-2x"></i>
            <a className="navbar-brand " href="#" >Pets Forever</a>
            <div className="collapse navbar-collapse justify-content-end" id="navbarNav">
                <ul className="navbar-nav mr-auto"> 
                    <li className="nav-item active">
                        {console.log("shit")}
                        <a className="nav-link" href="/home">Home <span className="sr-only"> 
 (current)</span></a>
                        {console.log("shit2")}

                    </li>
                    <li className="nav-item">
                        <a className="nav-link" href="#">Shop</a>
                        {console.log("shit3")}

                    </li>
                    <li className="nav-item">
                        <a className="nav-link" href="#">Contact Us</a>
                        {console.log("shit4")}

                    </li>
                    <li className="nav-item">
                        <a className="nav-link" href="#">Login</a>
                        {console.log("shit5")}

                    </li>
                    <li className="nav-item">
                        <a className="nav-link" href="#">Sign Up</a>
                        {console.log("shit6 ")}

                    </li>
            
                </ul>
            </div>
        </div>
    </nav>

</React.Fragment> 

);
}

export default Home;

though i was working navlink and yet it didn’t work and showed some weird error but i need to work this route first please

Answer

Your implementation seems to be incomplete. You’re missing BrowserRouter. Also, look at this response – it shows well how to use useRoutes.

import React, { Component } from 'react';
import Home from './home';
import {BrowserRouter as Router, Route, Routes} from "react-router-dom"

class App extends React.Component {
render() { 
    return (
    <React.Fragment>
        <Router>
           <Routes>
                <Route path="/home" element={<Home />} />
           </Routes>
        </Router>
    </React.Fragment>
    );
 }
}
export default App;