Как в React правильно организовать взаимодействие компонентов Link и Router?

Question

[Ken Jee]

Осваиваю React JS. Столкнулся с такой проблемой: при переходе по ссылке (ссылка ведет на страницу /about), которая создана компонентом Link не происходит рендер соответствующего компонента указанного в роутере. Т.е. URL в браузере меняется, а содержимое страницы остается прежним. Консоль чистая. Ошибок нет. Более того. Если просто зайти на страницу /about, то компоненты отрендарятся правильно.

Файл routes.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>
);

Файл footer.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 );

Answer 1

[Vitaliy]

Linkи Switch/Route в разных BrowserRouter, поэтому Linkне находит подходящие роуты, так как их просто нету.

Как примерно должно быть: https://codesandbox.io/s/qvr1p0ovm9

Comments

[Ken Jee]

Спасибо! Заработало!