URL 更改但组件未重新加载

Question

我是 React 的新手，我对 React Router 有疑问 Dom。我正在为我的简历开发一个单页应用程序来练习和我有一个汉堡菜单，我用 "Link" 来匹配好的 URL。我希望此链接加载关联的组件，但我必须刷新页面才能加载所需的组件。

我阅读了很多不同的方法来解决这个问题并尝试了其中的大部分但没有人帮助我解决我的问题..

此处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>
        );
    }
}

我的 Burger Menu 组件在头文件中 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;

最后是我的汉堡菜单：

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;

我已经尝试使用 "withRouter()" 但仍然没有任何反应... 我认为这是因为 Link 必须在 Switch 和 Router 旁边，但我该怎么办？如果有人可以帮助我 :) 谢谢

Answer 1

您应该将 <Header /> 移动到 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>
        );
    }
}

从 BM 组件中删除 <Router>，

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

URL 更改但组件未重新加载

URL changes but coponent does not reload

menu

reactjs

hamburger-menu

react-router-dom