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

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

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

В вашем случае элементы заголовка и корня обернуты различными BrowserRouter, и, следовательно, компонент Links в заголовке обновляет включающий поставщик 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;

После внесения этого изменения ваше приложение должно работать должным образом.