Why is react router rerendering the whole app?

Question

React

There is an app file

import React from 'react'
import Header from './Header'
import Main from './Main'

const App = () => (
  <div>
    <Header />
    <Main />
  </div>
)

export default App;

header file

import React from 'react'
import { Link } from 'react-router-dom'

const Header = () => (
  <header>
    <nav>
      <ul>
        <li><Link to='/'>Home</Link></li>
        <li><Link to='/Profile'>Profile</Link></li>
      </ul>
    </nav>
  </header>
)

export default Header

main file

import React from 'react'
import { Switch, Route } from 'react-router-dom'
import Home from './Home'
import Profilefrom './Profile'

const Main = () => (
  <main>
    <Switch>
      <Route exact path='/' component={Home}/>
      <Route path='/profile' component={Profile}/>
    </Switch>
  </main>
)

export default Main

It turns out that when I click on any link, the App component is rendered along with all its children. How to avoid it?