React-router <Route> tag not rendering component-CodePudding

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:

├─┬ [email protected]
│ └── [email protected] deduped
└── [email protected]

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

CodePudding user response：

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.

CodePudding user response：

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>