您只需要在组件中使用 BrowserRouter，以便所有路由都知道它们订阅的是哪个路由器，同时链接正在更新正确的路由器提供程序中的数据。

在您的情况下，Header 和 Root 元素由 Different 包装BrowserRouter，因此Linksin Header 组件更新封闭的RouterProvider，Routesindex.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;

进行此更改后，您的应用程序应该可以正常工作

您正在分别渲染标题和应用程序的其他部分，因为 React Router 实际上不知道应用程序的其他部分，因此它无法重新加载页面。您应该做的是创建类似布局组件的东西并将所有组件放在那里，以便您可以拥有单个 BrowserRouter hoc。