React Router in separate files - reactjs

Question

I'm trying to add routes to my react project. I have three separate components:
Window.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;
So basically, when I click one of my links in SideBar, I want to transition to that link in my Main Body (the Home and About just display their titles). However, When I run this, my Window, MainBody, and SideBar components work but my Home and About components do not get displayed. I've properly imported the router components into each component file. If I place the Routes from MainBody into the Window component, they get displayed (Not sure if the router links work with it though). Any suggestions would be helpful!

Answer 1

There are few typos in that snippets, dunno ifit was made when rewriting or u have it in your codebase, but be careful about them (component instead of Component, wrongly writtern render function with multiple elements returned etc).
import { BrowserRouter as Link} from "react-router-dom";
Theese imports are also wrong, You have to import Link not something as Link. You are only renaming import BrowserRouter to Link.
import { Link } from "react-router-dom";
And same for Route.
Here is example codesanbox . Let me know if that is what you wanted.