Почему Router не срабатывает?

Question

[Alex Ozerov]

При клике по пунктам меню роутер не рисует новую страницу. Url меняет, а само переключение не происходит, но если обновить страницу то контент измениться.

import React from 'react';
import Footer from './components/structure/Footer/Footer';
import Main from './components/Main/Main';
import Header from "./components/structure/Header/Header";
import Contacts from "./components/Contacts/Contacts";
import {BrowserRouter, Switch, Route} from 'react-router-dom';
class App extends React.Component {
    render() {
        return (
            <BrowserRouter >
                <div className="App">
                    <div className="wrapper">
                        <Header/>

                        <Switch>
                            <Route exact path='/' component={Main}/>
                            <Route path='/contacts' component={Contacts}/>
                        </Switch>

                        <Footer/>
                    </div>
                </div>
            </BrowserRouter>
        );
    }
}
export default App;

Навигация:

import React from 'react';
import './Nav.css';
import {BrowserRouter, Link} from 'react-router-dom';
class Nav extends React.Component {
    render() {
        return (
            <BrowserRouter>
                <header>
                    <div className="menu">
                        <nav className="container">
                            <ul className="menu-list">
                                <li className="list-item">
                                    <Link to="/">Главная</Link>
                                </li>
                                <li className="list-item">
                                    <Link to="/ex">Информация</Link>
                                </li>
                                <li className="list-item">
                                    <Link to="/contacts">Контакты</Link>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </header>
            </BrowserRouter>
        );
    }
}
export default Nav;

Comments

[Alex_mos]

Я конечно недавно начал изучать React, но попробуй в компоненте nav убрать Browser Router. Если не ошибаюсь он должен оборачивать только компонент App, точнее только один раз его нужно указывать.

[Alex Ozerov]

Alex_mos, да вы правы, допер до этого еще вчера. Меня немного запутал тот факт что если убрать browser router и оставить теги link - будет ошибка, но что бы ее исправить нужно вместо link писать NavLink