React-router <Route> tag not rendering component

Question

I'm running into an issue where my route tag in specific is not rendering any components.

Steps I have tried:

• Changed import of { Route } from "react-router-dom".
• Changed paths to see if other paths render.
• Rendered the component within tags (this worked).

The issue seems to be coming down to something going on with the tag.

Here is a copy of my code:

import { Component } from "react";
//import all components rendered
import NavBar from "./Nav";
import Orders from "./Orders";
import Cart from "./Cart";
import Menu from "./Menu";
import Login from "./Login.jsx";
import Home from "./Home.jsx";
// for routing
import { Route } from "react-router";
import { BrowserRouter } from "react-router-dom";

//main App to combine all components and be rendered
class App extends Component {
    render() {
        return (
            <BrowserRouter>
                <NavBar />
                <Route path="/" exact component={Login} />
            </BrowserRouter>
        )
    }
}

export default App;

The versions are:

├─┬ react-router-dom@6.2.1
│ └── react-router@6.2.1 deduped
└── react-router@6.2.1

I tried changing the tags to as per a suggestion and it still didn't work, but I may have implemented it incorrectly. Here is what I tried:

import { Component } from "react";
//import all components rendered
import NavBar from "./Nav";
import Orders from "./Orders";
import Cart from "./Cart";
import Menu from "./Menu";
import Login from "./Login.jsx";
import Home from "./Home.jsx";
// for routing
import { Route } from "react-router";
import { BrowserRouter, Routes } from "react-router-dom";

//main App to combine all components and be rendered
class App extends Component {
    render() {
        return (
            <Routes>
                <NavBar />
                <Route path="/" exact component={Login} />
            </Routes>
        )
    }
}

export default App;

The errors I am getting on the console are:

Uncaught Error: useRoutes() may be used only in the context of a <Router> component.
    Choo 3
    React 17
    Choo 2
    Webpack 3

The above error occurred in the <Routes> component:

Routes@http://localhost:3000/static/js/bundle.js:54433:7
App@http://localhost:3000/static/js/bundle.js:42:1

Any help would be greatly appreciated!

Solution:

Was resolved by switching the "component" tag to "element" tag and removing the tag outside as follows:

            <>
                <NavBar />
                <Routes>
                    <Route path="/" exact element={<Login />} />
                </Routes>
            </>

Answer 1

I ran into the same issue on react router v6, you need to wrap all your routes in the Routes component from react-router-dom.

Answer 2

• List item

put Navbar outside for Routes tag like i did below

import { BrowserRouter, Routes,Route } from "react-router-dom";

//main App to combine all components and be rendered
class App extends Component {
    render() {
        return (
           <>
            <NavBar />
            <Routes>
                <Route path="/" element={<Login/>} />
            </Routes>
          </>
        )
    }
}

export default App;

also for newer version of react-router-dom use element instead of component and remove exact It will be good if you use BrowserRouter index.js and wrapper App over there for example index.js

<BrowserRouter><App/></BrowserRouter>

Answer 3

Try this:

import { Component } from "react";
//import all components rendered
import NavBar from "./Nav";
import Orders from "./Orders";
import Cart from "./Cart";
import Menu from "./Menu";
import Login from "./Login.jsx";
import Home from "./Home.jsx";
// for routing
import { BrowserRouter, Route, Routes } from "react-router-dom";

//main App to combine all components and be rendered
class App extends Component {
    render() {
        return (
            <BrowserRouter>
                <NavBar />
                <Routes>
                   <Route path="/" element={<Login/>} exact/>
                </Routes>
            </BrowserRouter>
        )
    }
}

export default App;