React JS Router меняет URL, но не загружает страницу

Question

У меня большая проблема, я использую реагирование BrowserRouter, Link and Switch для управления маршрутизацией моего сайта, моя проблема в том, что когда я нажимаю на ссылку, она изменяется на URL, но не отображается, однако, когда я обновляю страницуэто работает.

Это моя страница Index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Home from './Home';
import Header from './Header';
import Footer from './Footer';
import Resume from './Resume';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<Header />, document.getElementById('header'));

ReactDOM.render((
    <BrowserRouter>
        <Switch>
            <Route exact path ="/" component={Home} />
            <Route path ="/resume" component={Resume} />
        </Switch>
    </BrowserRouter>
), document.getElementById('root'));

ReactDOM.render(<Footer/>, document.getElementById('footer'));


serviceWorker.unregister();

Это код Header.js:

import React, { Component } from 'react';
import bImg from './img/moi2.jpg';
import { BrowserRouter, Link } from 'react-router-dom';

/**
 * Composant définissant l'entête de la page (Navigation et la photo de début)
 * Link est utilisé à la place de <a> pour la gestion des routes.
 * @Author 
 * @date 15th november 2018
 */

class Header extends Component{
    render(){
        return(
           <div>
               <BrowserRouter>
                    <nav className="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
                        <div className="container">

                            <Link className="navbar-brand" to="/">Iam Root</Link>

                            <button className="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
                                    data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
                                    aria-label="Toggle navigation">
                                Menu
                                <i className="fas fa-bars"></i>
                            </button>

                            <div className="collapse navbar-collapse" id="navbarResponsive">
                                <ul className="navbar-nav ml-auto">
                                    <li className="nav-item">
                                        <Link to="/resume">Mon CV</Link>
                                    </li>
                                    <li className="nav-item">
                                        <Link to="/tutoriels">Tutoriels</Link>
                                    </li>
                                    <li className="nav-item">
                                        <Link to="/contact">Contactez-moi</Link>
                                    </li>
                                </ul>
                            </div>

                        </div>
                    </nav>
               </BrowserRouter>
                <header className="masthead" style={{backgroundImage: `url(${bImg})`}}>
                    <div className="overlay"></div>
                    <div className="container">
                        <div className="row">
                            <div className="col-lg-8 col-md-10 mx-auto">
                                <div className="site-heading">
                                    <h1 style={{ opacity: 0.4}}>prenom nom</h1>
                                    <span className="subheading">
                                        Fonction
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </header>
           </div>
        );
    }
}

export default Header;

Это мой код Resume.js:

import React, { Component } from 'react';

class Resume extends Component{

    render(){
        return(
            <div>
                Hello x's Resume
            </div>
        );
    }
}
export default Resume;

Home и Footer просты, как Resume.js

Заранее большое спасибо за вашу помощь.

Answer 1

Вам нужно иметь только на BrowserRouter в вашем компоненте, чтобы все маршруты знали, на какой маршрутизатор они подписаны, и в то же время ссылки обновляют данные в правильном поставщике маршрутизатора.

В вашем случае элементы Header и Root обернуты по-разному BrowserRouter и, следовательно, Links в компоненте Header обновляет включающий Router провайдер, на который другие Routes в файле index.js не подписываются и, следовательно, он не работает правильно.

Таким образом, вместо рендеринга различных элементов с помощью ReactDOM.render, вы можете сделать это просто как

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Home from './Home';
import Header from './Header';
import Footer from './Footer';
import Resume from './Resume';
import * as serviceWorker from './serviceWorker';


ReactDOM.render((
    <BrowserRouter> 
        <div>
          <div id="header">
            <Route component={Header} />
          </div>
          <Switch>
              <Route exact path ="/" component={Home} />
              <Route path ="/resume" component={Resume} />
          </Switch>
          <div id="footer">
            <Route component={Footer} />
          </div>
        </div>
    </BrowserRouter>
), document.getElementById('root'));


serviceWorker.unregister();

И Header.js

import React, { Component } from 'react';
import bImg from './img/moi2.jpg';
import { BrowserRouter, Link } from 'react-router-dom';

/**
 * Composant définissant l'entête de la page (Navigation et la photo de début)
 * Link est utilisé à la place de <a> pour la gestion des routes.
 * @Author 
 * @date 15th november 2018
 */

class Header extends Component{
    render(){
        return(
           <div>
                    <nav className="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
                        <div className="container">

                            <Link className="navbar-brand" to="/">Iam Root</Link>

                            <button className="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
                                    data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
                                    aria-label="Toggle navigation">
                                Menu
                                <i className="fas fa-bars"></i>
                            </button>

                            <div className="collapse navbar-collapse" id="navbarResponsive">
                                <ul className="navbar-nav ml-auto">
                                    <li className="nav-item">
                                        <Link to="/resume">Mon CV</Link>
                                    </li>
                                    <li className="nav-item">
                                        <Link to="/tutoriels">Tutoriels</Link>
                                    </li>
                                    <li className="nav-item">
                                        <Link to="/contact">Contactez-moi</Link>
                                    </li>
                                </ul>
                            </div>

                        </div>
                    </nav>
                <header className="masthead" style={{backgroundImage: `url(${bImg})`}}>
                    <div className="overlay"></div>
                    <div className="container">
                        <div className="row">
                            <div className="col-lg-8 col-md-10 mx-auto">
                                <div className="site-heading">
                                    <h1 style={{ opacity: 0.4}}>prenom nom</h1>
                                    <span className="subheading">
                                        Fonction
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </header>
           </div>
        );
    }
}

export default Header;

Как только вы сделаете это изменение, ваше приложение должно работать как нужно

Answer 2

Вы визуализируете заголовок и другую часть приложения по отдельности, поскольку React Router фактически не знает о другой части вашего приложения, поэтому он не может перезагрузить страницу. Что вы должны сделать, это создать что-то вроде компонента макета и поместить все свои компоненты туда, чтобы вы могли иметь один BrowserRouter hoc.