React Router changes Link but doesnt render proper component - reactjs

Question

Hello I'm working with React Router... I have two components App.js and SideNavComponent. I want to click the link in the SideNavComponent to and travel to the correct Component.
Right now when I click on the Link it changes the URL but does not render the correct component. However if I change the URL myself the correct view renders.
App.js
import React, { Component } from 'react';
import { Col, Well, Panel } from 'react-bootstrap';
import NavbarComponent from './NavbarComponent';
import SideNavComponent from './SideNavComponent';
import Router from './Router';
class App extends Component {
render() {
return (
<div>
<div className="header">
<NavbarComponent />
</div>
<div className="body">
<Col md={3}>
<Well>
<SideNavComponent />
</Well>
</Col>
<Col md={9}>
<Panel>
<Router />
</Panel>
</Col>
</div>
<div className="footer" />
</div>
);
}
}
export default App;
SideNavComponent
import React, { Component } from 'react';
import { Nav, NavItem } from 'react-bootstrap';
import { Link, BrowserRouter, Switch } from 'react-router-dom';
class SideNavComponent extends Component {
state = {
selectedLink: 1
};
selectLink(key) {
this.setState({ selectedLink: key });
}
render() {
return (
<BrowserRouter>
<div style={{ flexDirection: 'column' }}>
<Link to="/">Home</Link>
<Link to="/device">Device</Link>
<Link to="/transform">Transformation</Link>
<Link to="/graph">Graphs</Link>
</div>
</BrowserRouter>
);
}
}
export default SideNavComponent;
Router.js
import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import HomeComponent from './pages/HomeComponent';
import DeviceComponent from './pages/DeviceComponent';
import TransformationComponent from './pages/TransformationComponent';
import GraphComponent from './pages/GraphComponent';
const Router = () => {
return (
<BrowserRouter>
<div>
<Switch>
<Route path="/device" component={DeviceComponent} />
<Route path="/transform" component={TransformationComponent} />
<Route path="/graph" component={GraphComponent} />
<Route exact path="/" component={HomeComponent} />
</Switch>
</div>
</BrowserRouter>
);
};
export default Router;

Answer 1

The problem is you have multiple instances of browser router and history is getting confused. You can fix this by re-organising the structure of application like the below example.
// *-----------------------*
// | MAIN-APP COMPONENT |
// *-----------------------*
import React, { Component } from "react";
import { Col, Well, Panel } from "react-bootstrap";
import { Route, Switch } from "react-router-dom";
import SideNavComponent from "./SideNavComponent";
const HomeComponent = () => <div>Home</div>;
const GraphComponent = () => <div>Graph</div>;
const DeviceComponent = () => <div>Device</div>;
const TransformationComponent = () => <div>Transformation</div>;
class App extends Component {
render() {
return (
<div>
<div className="header" />
<div className="body">
<Col md={3}>
<Well>
<SideNavComponent />
</Well>
</Col>
<Col md={9}>
<Panel>
<Switch>
<Route path="/device" component={DeviceComponent} />
<Route path="/transform" component={TransformationComponent} />
<Route path="/graph" component={GraphComponent} />
<Route exact path="/" component={HomeComponent} />
</Switch>
</Panel>
</Col>
</div>
<div className="footer" />
</div>
);
}
}
export default App;
// *-----------------------*
// | SIDENAV-COMPONENT |
// *-----------------------*
import React, { Component } from "react";
import { Nav, NavItem } from "react-bootstrap";
import { Link } from "react-router-dom";
class SideNavComponent extends Component {
render() {
return (
<div style={{ flexDirection: "column" }}>
<Link to="/">Home</Link>
<Link to="/graph">Graphs</Link>
</div>
);
}
}
export default SideNavComponent;
// *-----------------------*
// | MAIN.JS (ENTRY POINT) |
// *-----------------------*
import React from 'react'
import { render } from 'react-dom'
import App from './components/App';
import { BrowserRouter } from 'react-router-dom';
render((
<BrowserRouter>
<App />
</BrowserRouter>
), document.getElementById('root'));