react component の中身が表示されない

reactを使ってviewの表示切り替たいのですが、うまくいきません。
なぜかPostComponentのみ表示されません。
ファイルの場所もはほかのコンポーネントと同じ場所です。

アドバイスいただければ幸いです。

App.js

import React from 'react';
import ReactDOM from 'react-dom';

import NavBar from './NavBar'
import About  from './About'
import User   from './User'
import Top    from './Top'
import Post   from './Post'

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


function App() {
    return (
    <Router>
        <div>
            <NavBar />
            <Route exact path="/"        component={Top}   />
            <Route path      ="/about"   component={About} />
            <Route path      ="/user"    component={User}  />
            <Route path      ="/post"    component={Post}  />
        </div>
    </Router>
    )
}

if (document.getElementById('app')) {
    ReactDOM.render(<App />, document.getElementById('app'));
}

Post.js

import React from 'react';

function Post() {
    return <h1>Postページ</h1>;
}

export default Post;

html

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
    <div id="app"></div>
</body>
</html>