React中如何正确组织Link和Router组件的交互？

我正在学习 ReactJS。我遇到了这样一个问题：当跟随Link组件创建的链接时，在router中指定的对应组件没有被渲染。那些。浏览器中的 URL 发生变化，但页面内容保持不变。

路由.js 文件

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';

import Home from './home';
import About from './about';

export default () => (
    <div>
        <BrowserRouter>
            <Switch>
                <Route exact path='/' component={Home} />
                <Route path='/about' component={About} />
            </Switch>
        </BrowserRouter>
    </div>
);

文件页脚.js

import React from 'react';
import { BrowserRouter, Link } from 'react-router-dom';
import CSSModules from 'react-css-modules';

import { grids } from 'pure-css';

let styles = {};
Object.assign( styles, grids );

class Footer extends React.Component {
    render() {
        return (
            <div className="wide-panel-decoration">
                <footer>
                    <div className='pure-g'>
                        <div className="pure-u-1-3">
                            &copy; Lab, 2018
                        </div>
                        <div className="pure-u-1-3">
                            asdsd
                        </div>
                        <div className="pure-u-1-3">
                            <BrowserRouter>
                                <nav>
                                    <Link to="/about">О проекте</Link>
                                </nav>
                            </BrowserRouter>
                        </div>
                    </div>
                </footer>
            </div>
        );
    }
}

export default CSSModules( Footer, styles );