In react i am trying to render pages Using browserrouter and route but it does not render anything s-CodePudding

when I run react app on localhost it not showing any error but also not render anything and when I tried with only navbar component it render but same when I adds browserrouter it not shows anything I tried with exact path method also

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

import './App.css';
import Navbars from './components/Navbar';

import Login from './components/screens/Login.jsx';
import Signup from './components/screens/Signup.jsx';

import Home from './components/screens/Home'
import Profile from './components/screens/Profile';




function App() {
  return (
    <div>
      <BrowserRouter>

        <Navbars />
        <Route path="/">
          <Home />
            </Route>
        <Route path="/login">
          <Login />
        </Route>
        <Route path="/signup">
          <Signup />
        </Route>

      </BrowserRouter>
    </div>
  );
}

export default App;

CodePudding user response：

You have to wrap your Routes in a <Routes></Routes> component. Also with react-router-dom V17 you have to use element prop instead of component like that:

  <BrowserRouter>
    <Routes>
      <Route path="/" element={<Home />}></Route>
      // ... here your other routes
    </Routes>
  </BrowserRouter>

CodePudding user response：

You have to specify the component prop with the component you want to render for each route.

You also have to wrap your routes like this.

Import Router and Switch too.


<Router history={history}>
  <Switch>
    <Route component={Register} exact path="/register"/>
    <Route component={Home} exact path="/" />
  </Switch>
</Router>