React Router в отдельных файлах

Я пытаюсь добавить маршруты в свой проект реагирования. У меня есть три отдельных компонента:

Окно.js

import React, { Component } from 'react';
import SideBar from "../SideBar/SideBar";
import MainBody from "../MainBody/MainBody";
import  { BrowserRouter as Router} from "react-router-dom";

class Window extends Component{
    render() {
        return (
        <div>
        <Router>
                <SideBar />
                <MainBody />
        </Router>
        </div>
        );
    }
}

export default Window

SideBar.js

import React, { Component } from 'react';
import PropTypes from "prop-types";
import  { BrowserRouter as Link} from "react-router-dom";

class SideBar extends Component {
     render() {
         return(

            <Link to = "/">Home</Link>
            <Link to = "/about">About</Link>
         );
     }
}

export default SideBar;

MainBody.js

import React, { Component } from 'react';
import Home from "./Home/Home";
import About from "./About/About";
import  { BrowserRouter as Route} from "react-router-dom";

class MainBody extends component {
     render() {
         return(
            <div>
            <Route exact path = "/" component = {Home}>
            <Route path = "/about" component = {About}>
            </div>
         );
     }
}

export default MainBody;

Таким образом, в основном, когда я нажимаю одну из моих ссылок в боковой панели, я хочу перейти к этой ссылке в моем основном теле (дома и о программе просто отображают свои заголовки). Однако, когда я запускаю это, мои компоненты Window, MainBody и SideBar работают, но мои компоненты Home и About не отображаются. Я правильно импортировал компоненты маршрутизатора в каждый файл компонента. Если я помещу маршруты из MainBody в компонент Window, они отобразятся (хотя не уверен, что ссылки маршрутизатора работают с ним). Любые предложения будут полезны!