React Router изменяет URL, но не отображает новый компонент

Question

Я новичок в React Router.

URL отображается в адресной строке, когда я нажимаю на Ссылки, но содержимое не отображается.Это использует React-Router версии 4. Когда я нажимаю на ссылку в панели навигации, я хочу иметь возможность посещать перечисленные ссылки, такие как домашняя страница или страница блога.

NavbarКомпонент

import React, { Component } from "react";
import { render } from 'react-dom';
import { BrowserRouter, Route, Link } from 'react-router-dom';
import Blogpost from "./Blogpost";


export default class Navbar extends Component {
render() {
    return (
        <BrowserRouter>
        <div id="header">
            <Link to='/app'>App</Link>
            <Link to='/'>Blogpost</Link>

        </div>
        </BrowserRouter>
    );
  }
}

Домашний компонент

import React, { Component } from "react";
import { database } from "../firebase";
import _ from "lodash";
import renderHTML from "react-render-html";
import "../App.css";
import App from "./App";
import Header from "./Header";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import Blogpost from "./Blogpost";

export default class Home extends Component {

....

render() {
return (
  <BrowserRouter>
    <div>
      <Switch>
        <Route path="/Home" component={Home} />
        <Route exact path="/" component={Blogpost} />
      </Switch>
      <Header />
      <br />
      <div className="homeData">{this.renderPosts()}</div>
    </div>
  </BrowserRouter>
  );
 }
}

Index.js Компонент

import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";
import Home from "./components/Home";
import Blogpost from "./components/Blogpost";
import * as serviceWorker from "./serviceWorker";

ReactDOM.render(<Blogpost />, document.getElementById("root"));

serviceWorker.unregister();