how can i use Route without getting any errors like this

Question

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

jgrewal · Accepted Answer · 2021-12-20T13:42:50.150

0

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;

edited Dec 20 '21 at 13:42

answered Dec 20 '21 at 13:36

jgrewal

189
1
2
11

i don't get it why should i add router and browserouter while in the routes doc it doesn't say that at all so why all of these are added i don't get it yet sorry for disturbing – Abdelrahman Kamal Dec 20 '21 at 14:12
All good. Here is an article from the time it was originally published. It's written by an internal engineer of their team so I count this as a doc too - https://reacttraining.com/blog/react-router-v6-pre/. It's also in v5 docs. – jgrewal Dec 20 '21 at 14:16
i just did what you said and read the article and it worked then i put my old code as it's submitted above and it worked fine as well :"D i don't know the issue for real you understand what am trying to say here? – Abdelrahman Kamal Dec 20 '21 at 14:32
That's really odd. My code has never worked without the BrowserRouter or components mentioned in the docs. I just tried to implement your version and the same result - it breaks. Try refreshing your old code? Maybe the breaking changes didn't take effect yet lol. But if it still works, that's really interesting. – jgrewal Dec 20 '21 at 14:42
you probably right i missed something but another question i know am being annoying :")browserouter as router is it necessery or i can use the browesrouter instantly ? – Abdelrahman Kamal Dec 20 '21 at 14:56
You can use BrowerRouter as it is [Router is just an alias]. It's an industry norm so I use it like that, but not needed. – jgrewal Dec 20 '21 at 16:41

how can i use Route without getting any errors like this

1 Answers1