React Router Route does return anything

December 30, 2021

I am very beginner in React and while I was practicing Router, I found that does not return the related component.
below is the code.
p.s. BrowserRouter works properly is the Hello world has been rendered.

import React, {Component} from 'react';
import {Route, BrowserRouter} from 'react-router-dom';
import './App.css';
import MainPage from './MainPage';
import About from './About';

class App extends Component {
  render(){
  return (
    <BrowserRouter>
          <div> Hello world</div>
      <Route exact path="/"  component={MainPage}/>
      <Route path="about" component={About}/>
    </BrowserRouter>  
  );
  }
}
export default App;

>Solution :

For react router dom 6 it should be element:

import { render } from "react-dom";
import {
  BrowserRouter,
  Routes,
  Route
} from "react-router-dom";
// import your route components too

render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />}>
        <Route index element={<Home />} />
        <Route path="teams" element={<Teams />}>
          <Route path=":teamId" element={<Team />} />
          <Route path="new" element={<NewTeamForm />} />
          <Route index element={<LeagueStandings />} />
        </Route>
      </Route>
    </Routes>
  </BrowserRouter>,
  document.getElementById("root")
);

Sources: https://reactrouter.com/docs/en/v6/getting-started/overview