URL changes but coponent does not reload

Question

I'm new to React and I Have a problem with React Router Dom. I'm developping an single page App for my resumee to practicing and I have a burger menu where I used "Link" to match the good URL. I want this links load the component associated but I have to refresh the page to load the component wanted.

I read a lot of different way to solve this problem and tried most of them but no one helping me to solve my prroblem..

Here App.js:

import Formations from "./formations/formations";
import Experiences from "./experiences/experiences";
import BM from "./BM/BM";
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link,
    withRouter,
} from "react-router-dom";

class App extends React.Component {
    render() {
        return (
            <div className="App">
                <Header />
              <p className="App-intro">{this.state.apiResponse}</p>
                <Router>
                    <div>
                        <Switch>
                            <Route exact path="/" component={Home} />
                            <Route path="/formations" component={Formations} />
                            <Route path="/experiences" component={Experiences} />
                        </Switch>
                    </div>
                </Router>
                <div className="bottomPage">
                    <p>down page</p>
                </div>
            </div>
        );
    }
}

My Burger Menu component is in the Header file Header.js :

import React from "react";
import "./Header.css";
import BM from "../BM/BM";

class Header extends React.Component {

  render() {
    return (
      <div className="headerStyle">
        <header>
          <img src=""></img>
          <p>GF</p>
          <div id="outer-container">
            <BM />
          </div>
        </header>
      </div>
    );
  }
}

export default Header;

Finally here is my Burger Menu:

import React from "react";
import { pushRotate as Menu } from "react-burger-menu";
import { BrowserRouter as Router, Link, Route, Switch} from 'react-router-dom'
import "./BM-styles.css";

class BM extends React.Component {
  render() {
    return (
      <Menu>
        <Router>
        <li><Link to="/" className="menu-item">
          Home
        </Link></li>
        <p className="bar">/</p>
        <li><Link to="/experiences" className="menu-item" >
          Expériences
        </Link></li>
        <p className="bar">/</p>
        <li><Link to="/formations" className="menu-item" >
          Formations
        </Link></li>
        <p className="bar">/</p>
        <li><Link to="/loisirs" className="menu-item">
          Loisirs
        </Link></li>
        </Router>
      </Menu>
    );
  }
}

export default BM;

I already tried to use "withRouter()" but stll nothing happens... I think it is because Link has to be next to Switch and Router but how could i do ? If someone could help me :) Thanks

Answer 1

You should move your <Header /> into Router,

class App extends React.Component {
    render() {
        return (
            <div className="App">
                <Router>
                <Header />
                  <p className="App-intro">API response</p>
                    <div>
                        <Switch>
                            <Route exact path="/" component={Home} />
                            <Route path="/formations" component={Formations} />
                            <Route path="/experiences" component={Experiences} />
                        </Switch>
                    </div>
                </Router>
                <div className="bottomPage">
                    <p>down page</p>
                </div>
            </div>
        );
    }
}

Remove the <Router> from BM component,

class BM extends React.Component {
  render() {
    return (
      <Menu>
        <li><Link to="/" className="menu-item">
          Home
        </Link></li>
        <p className="bar">/</p>
        <li><Link to="/experiences" className="menu-item" >
          Expériences
        </Link></li>
        <p className="bar">/</p>
        <li><Link to="/formations" className="menu-item" >
          Formations
        </Link></li>
        <p className="bar">/</p>
        <li><Link to="/loisirs" className="menu-item">
          Loisirs
        </Link></li>
      </Menu>
    );
  }
}

Demo