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: 
if you use react-router-dom^6

```
  import {Route, BrowserRouter, Routes} from 'react-router-dom';
  <BrowserRouter>
      <div> Hello world</div>
  <Routes>
  <Route exact path="/" element={<MainPage />} />
    <Route exact path="/about" element={<About />} />
  </Routes> 
  </BrowserRouter>  

```

or you use react-router-dom^5

```
 import {Route, BrowserRouter, Switch} from 'react-router-dom';

  <BrowserRouter>
    <div> Hello world</div>
    <Switch>
      <Route exact path="/"  component={MainPage}/>
      <Route path="/about" component={About}/>
    </Switch> 
  </BrowserRouter> 

```
You need to wrap `Route` with `Routes` or `Switch`(depending on which version of react-router-dom are you using)

```
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>
        <Switch>
          <Route exact path="/"  component={MainPage}/>
          <Route path="/about" component={About}/>
        </Switch>
      </BrowserRouter>  
    );
  }
}
export default App;

```

Make sure to import it as well!