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

Question

我正在开发一个reactjs前端，在我的app.js中我有以下代码:

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;

我还有一个带有以下代码的主页组件:

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;

这是我的导航栏组件:

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;

现在我想做的是，当我单击导航栏中的链接(服务或主页)时，我希望呈现该路由的组件，但我在浏览器链接中遇到的问题是它显示 localhost:3000/Services 但Home 组件的内容仍然显示，就像从来没有新的页面导航一样。

这是我的服务组件:

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;

这是一些图片:

第一张图片是单击链接之前的主页:第二张图片是单击链接后的服务页面:(无服务内容)

Answer 1

您需要将 Navbar 移至主 App.js，并且不要在 Router 内使用 Router(即主页和服务页面)

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;