Question: 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;

```

Answer: 
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>
I recommend that you append component after def. of the last Route.

like this...

```
 <Route path="about" component={About}/>
 <Outlet/>

```