为什么 Reactjs 不加载组件内容？

Question

I'm working on a reactjs front end, and in my app.js i have this following code :

import React from 'react';
import {BrowserRouter as Router,Route,Switch, Link} from 'react-router-dom';
import Login from './Components/Login.component';
import Register from './Components/Register.component';
import Home from './Components/Home.component';
import Services from './Components/Services.component';
import 'bootstrap/dist/css/bootstrap.css';
import './App.css';

function Index() {
return(
<div className="container-fluid index-container" style={{backgroundImage:"url(indexBackground.png)"}}>
    <nav className="navbar navbar-expand-lg navbar-light index-navbar">
      <a className="navbar-brand" href="#">
        <img className="img-fluid" width="110" src="logo.png" alt="logo"></img>
      </a>
      <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span className="navbar-toggler-icon"></span>
      </button>

      <div className="collapse navbar-collapse" id="navbarSupportedContent">
        <ul className="navbar-nav ml-auto">
          <li className="nav-item">
            <a className="nav-link" href="#">Acceuil</a>
          </li>
          <li className="nav-item">
            <a className="nav-link" href="#">Actualités</a>
          </li>
          <li className="nav-item">
            <a className="nav-link" href="#">Nos services</a>
          </li>
          <li className="nav-item">
            <a className="nav-link" href="#">Nos vehicules</a>
          </li>
          <li className="nav-item">
            <a className="nav-link" href="#">Contactez-nous</a>
          </li>
          <li className="nav-item">
            <a className="nav-link" href="#">Blog</a>
          </li>
          <li className="nav-item">
            <a className="nav-link" href="#">Se connecter</a>
          </li>
        </ul>
      </div>
    </nav>
    <div id="index-container-x" className="row d-flex align-items-center" style={{display:"none"}}>
      <div className="col-lg-6 index-container-x justify-content-center">
        <h1 className="white-heading">Découvrez la location longue durée nouvelle génération</h1>
        <hr style={{borderColor:"#fff"}} />
        <Link className="btn btn-primary" to="/Register">S'abonner</Link>
      </div>
    </div>
</div>
 )
}
function App() {
 return (
  <Router>
    <Switch>
    <Route exact path="/">
      <Index />
    </Route>
      <Route path="/Login">
        <Login />
      </Route>
      <Route path="/Register">
        <Register />
      </Route>
      <Route path="/Home">
        <Home />
      </Route>
      <Route path="/Services">
        <Services />
      </Route>
    </Switch>
  </Router>
  );
  }
 export default App;

I also have a home component with the following code :

import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import '../App.css';
import {BrowserRouter as Router } from 'react-router-dom';
import Navbar from './Navbar.component';
import Chart from './Chart.component';

class Home extends Component {
render() {
    return(
        <Router>
            <Navbar />
            <Chart />
        </Router>
    )
   }
}
export default Home;

Here is my navbar component :

import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.js';
import '../App.css';
import {BrowserRouter as Router,Route, Link } from 'react-router-dom';

class Navbar extends Component {
  render() {
      return(

            <nav className="navbar navbar-expand-lg navbar-light blue-nav">
            <Link className="navbar-brand" to="/Home">
                <img alt="nothing" width="110" src="logo.png"></img>
            </Link>
            <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span className="navbar-toggler-icon"></span>
            </button>

            <div className="collapse navbar-collapse" id="navbarSupportedContent">
                <ul className="navbar-nav mr-auto">
                <li className="nav-item">
                    <Link className="nav-link" to="/Home"><i className="fas fa-tachometer-alt"></i> Tableau de bord</Link>
                </li>
                <li className="nav-item">
                    <Link className="nav-link" to="/Services"><i className="fas fa-hand-holding-heart"></i> Nos services</Link>
                </li>
                <li className="nav-item">
                    <Link className="nav-link" to="/Contracts"><i className="fas fa-folder-open"></i> Mes contrats</Link>
                </li>
                <li className="nav-item">
                    <Link className="nav-link" to="/Vehicles"><i className="fas fa-car"></i> Mes vehicules</Link>
                </li>
                <li className="nav-item">
                    <Link className="nav-link" to="/Notifications"><i className="fas fa-bell"></i> Notifications <span className="badge badge-danger">4</span></Link>
                </li>
                <li className="nav-item">
                    <Link className="nav-link" to="/Support"><i className="fas fa-question-circle"></i> Aide</Link>
                </li>

                </ul>
                <ul className="navbar-nav ml-auto">
                <li className="nav-item dropdown">
                    <Link className="nav-link dropdown-toggle" to="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <i className="fas fa-user-cog"></i> Compte
                    </Link>
                    <div className="dropdown-menu dropdown-menux" aria-labelledby="navbarDropdown">
                    <Link className="dropdown-item" to="#"><i className="fas fa-user-circle"></i> Modifier mon profile</Link>
                    <Link className="dropdown-item" to="#"><i className="fas fa-lock"></i> Sécurité</Link>
                    <Link className="dropdown-item" to="#"><i className="fas fa-cogs"></i> Paramètres</Link>
                    <div className="dropdown-divider"></div>
                    <Link className="dropdown-item" to="#"><i className="fas fa-power-off"></i> Se déconnecter</Link>
                    </div>
                </li>
                </ul>
            </div>
            </nav>

      )
  }
}
export default Navbar;

Now what i want to do is when i click the LINK in the navbar (services Or Home) i want that route's component to be rendered, but the problem i have in the browser link it showes localhost:3000/Services but the content of Home component still shows up like there was never a new page navigation.

Here is my services component :

import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import '../App.css';
import {BrowserRouter as Router } from 'react-router-dom';
import Navbar from './Navbar.component';

class Services extends Component {
  constructor(props){
      super(props);
  }
  render() {
      return(
        <Router>
            <Navbar />
        </Router>
     )
  }
}
export default Services;

Here is some images :

1st image is for the Home before the click of the Link : 2nd image is for the Services page after the link is clicked : (no services content)

Answer 1

You need to move Navbar to main App.js and don't use Router inside Router (ie Home and Services pages)

 function App() { const key = Date.now(); return ( <Router> <Navbar /> <Switch> <Route key={key} exact path="/"> <Index /> </Route> <Route key={key} exact path="/Login"> <Login /> </Route> <Route key={key} exact path="/Register"> <Register /> </Route> <Route key={key} exact path="/Home"> <Home /> </Route> <Route key={key} exact path="/Services"> <Services /> </Route> </Switch> </Router> ); } export default App; class Home extends Component { render() { return(<Chart />) } } export default Home; class Services extends Component { render() { return(<ServciesContent />) } } export default Home;