I'm in the very first step to create an project, but the react-router-dom's 'Route' just don't work. When i try to use it, just erase all other things in the screen.

My app.js:

import { BrowserRouter, Route } from 'react-router-dom';
import './App.css';
import Header from './components/Header';
import CoinPage from './Pages/CoinPage';
import Homepage from './Pages/Homepage';



function App() {
  return (


    <BrowserRouter>
      <div>
        <Header />
        <Route path="/" component={Homepage} />
        <Route path="/coins/:id" component={CoinPage} />
      </div>
    </BrowserRouter>


  );
}

export default App;

My CoinPage.js:

import React from 'react'

const CoinPage = () => {
  return (
    <div>
        Coin Page
    </div>
  )
}

export default CoinPage

My Homepage.js:

import React from 'react'

export const Homepage = () => {
  return (
    <div>
        Homepage
    </div>
  )
}

export default Homepage

My Header.js:

import React from 'react'



/*The header it self:*/
export const Header = () => {
  return (
    <div>
        Header
    </div>
  )
}

export default Header

When I remove <Route path="/" component={Homepage}/> and <Route path="/coins/:id" component={CoinPage} /> the 'Header' component appears again