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

Здравствуйте, я работаю с React Router ... У меня есть два компонента: App.js и SideNavComponent. Я хочу щелкнуть ссылку в SideNavComponent и перейти к нужному компоненту.

Прямо сейчас, когда я нажимаю на ссылку, она меняет URL-адрес, но не отображает правильный компонент. Однако, если я сам изменю URL-адрес, отобразится правильный вид.

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;