[Solved]-React js Router changes url but not loading page-Reactjs

You only need to have on BrowserRouter in your component so that all Routes are aware of which Router they are subscribing to and at the same time Links are updating data in the correct Router Provider.

In your case, Header and Root elements are wrapped by Different BrowserRouter and hence the Links in Header component update the enclosing Router Provider, which the other Routes in index.js file aren't subscribing to and hence it doesn't work correctly.

So instead of rendering different elements with ReactDOM.render, you can do it simply like

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();

And 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;

Once you make this change, your App should work as desired