A
A
Alex Ozerov2020-07-16 19:14:34
React
Alex Ozerov, 2020-07-16 19:14:34

Why is Router not working?

When clicking on menu items, the router does not draw a new page. Url changes, but the switch itself does not occur, but if you refresh the page, then the content will change.

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;

Navigation:
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;

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question