Вы не должны использовать Link вне маршрутизатора с помощью response-router-dom

Я пытаюсь выполнить маршрутизацию с помощью response-router-dom. Я получил ошибку, как будто вы не должны использовать за пределами этого. Ниже я прикрепляю свой код, пожалуйста, проверьте.

index.js

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createLogger } from 'redux-logger'
import App from './containers/App';




render(
  <Provider>
     <App/>
  </Provider>,
  document.getElementById('root')
)

App.js

import React from 'react';
import Dropdown from './dropdown';
import './styles.css';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import Home from './Home';
import Addatttemp from './Addatttemp';

const options = [
    {label: 'One' },
    {label: 'Two'},
    {label: 'Three'},
    {label: 'Four' }
]
const AgentValues=[
    {label: 'Add Att/temp', value:'Addatttemp' },
    {label: 'Mod prof LVL',value:'Modproflvl'},
    {label: 'Override Attr',value:'Overrideattr'},
    {label: 'Temp',value:'temp'}
]
const defaultOption = options[0]
export default class App extends React.Component {
    constructor (props) {
        super(props)
    }
    render() {
        return (
            <div>
                <div className="navbar">
                    <div className="align">
                        <div className="dropdown">
                            <Dropdown options={AgentValues} name='Agent'/>
                        </div>
                        <div className="dropdown">
                            <Dropdown options={options} name='Templete'/>
                        </div>
                        <div className="dropdown">
                            <Dropdown options={options} name='Report'/>
                        </div>
                        <div className="dropdown">
                            <Dropdown options={options} name='Search'/>
                        </div>
                    </div>
                </div>
                <Router>
                <Switch>
                    <Route exact path='/' component={Home} />
                    <Route exact path='/Agent/Addatttemp' component={Addatttemp} />
                </Switch>
            </Router>
            </div>
        );
    }
}

Dropdown.js

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

class dropdown extends Component {
    constructor (props) {
        super(props)
    }
    render(){
        var dropdownList = []
        this.props.options.map((res)=>{
            dropdownList.push(<Link to={'/'}>{res.label}</Link>)
        })
        return(
            <div>
                <button className="dropbtn"><Link to={'/'}>{this.props.name}</Link>
                </button>
                <div className="dropdown-content">
                    {dropdownList}
                </div>
            </div>
        )
    }
}


export default dropdown;

Home.js

import React from 'react'

const Home = () => (
    <div>
        <h1>Welcome to the Tornadoes Website!</h1>
    </div>
)

export default Home

Addatttemp.js

import React from 'react'

const AddTemp = () => (
    <div>
        <h1>Welcome to the Add att/temp!</h1>
    </div>
)

export default AddTemp

Вот так я написал свой код, но когда я запускаю этот код, он выдает ошибку типа Неперехваченная ошибка: вы не должны использовать ссылку вне маршрутизатора. Я не могу решить эту проблему, пожалуйста, дайте мне предложения о том, что я сделал не так, любая помощь очень ценится.