Reactjs React-Link不'；t自动刷新页面

我目前遇到了一个类似的问题，但是，对于我的案例，答案并不适用

请看，我目前正在使用react路由器创建一个名为“study/：id”的路径。此：id变量将仅打印在页面上

下面是我的浏览器路由器（App.js）的代码

从“React”导入React；
导入“/App.css”；
从“./主页/主页”导入主页；
从“/StudyPage/Study”导入研究；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch}；
函数App（）{
返回(
);
}
导出默认应用程序；

在研究组件内部，它基本上只有一个菜单栏和一个我们所处的courseId的指示器：

import React from 'react';
import './Study.css';
import Menubar from '../Menubar';
import Sidebar from './Sidebar';
import Chapter from './Chapter';

class Study extends React.Component{

    constructor(props){
        super(props);
        this.state = {
            courseId: this.props.match.params.id,
        };
    }

    render(){
        return(
            <div id="studyWrapper">
                <Menubar />
                <h1>We are on course: {this.state.courseId}</h1>
            </div>
        )
    }
}

export default Study;

从“React”导入React；
导入“/Study.css”；
从“../Menubar”导入菜单栏；
从“./Sidebar”导入侧栏；
从“./章”导入章；
课堂学习扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
courseId:this.props.match.params.id，
};
}
render（）{
返回(
我们的路线是：{this.state.courseId}
)
}
}
出口违约研究；

为了让用户在研究页面中导航，我使用了如下的菜单栏组件（menubar.js）

从“React”导入React；
导入“/Menubar.css”；
从'reactstrap'导入{Nav}；
从“react bootstrap”导入{Dropdown，DropdownButton}；
从'react router dom'导入{Link}；
类菜单栏扩展了React.Component{
建造师（道具）{
超级（）；
此.state={
课程：[]，
重新加载：false
}
}
异步组件didmount（）{
const response=wait fetch（“/v1/courses/”）
const body=wait response.json（）；
这是我的国家({
课程：身体
});
}
render（）{
const{courses}=this.state
返回(
001
002
003
)
}
}
导出默认菜单栏

IRL，学习页面基本上是这样的

问题

我遇到的问题是，一旦我进入了“/study/001”页面（就像上面的图片）。如果我尝试单击菜单栏中的下拉项002，URL将更改为“研究/002”，但页面不会更改。它不会刷新。

基本上，来自的解决方案是使用windows.location.reload（），但在我的情况下，这不起作用，如果我们这样做，当我单击dropdownItem 002时，URL将暂时更改为“study/002”，但随后“study/001”将刷新，从而使页面返回到001

我的问题是，当url被链接更改时，我们有没有办法刷新页面？ 或者如果没有，有没有其他方法可以用于此设计？也许首先使用链接不是正确的方法

请原谅我写了这么长的帖子，我尽量把它说清楚

---

谢谢大家!

在学习组件中，您可以使用componentDidUpdate并将当前的道具与prevProps进行比较，以检查url是否已更改，然后更改状态，这将导致组件更新。或多或少，您会有以下代码：

    componentDidUpdate(prevProps) {

        if( this.props.match.params.id !== prevProps.match.params.id ){
            this.setState({ courseId: this.props.match.params.id })
        };

    }

---

非常感谢。这帮了大忙

import React from 'react';
import './Menubar.css';
import { Nav } from 'reactstrap';
import { Dropdown, DropdownButton }  from 'react-bootstrap';
import { Link } from 'react-router-dom';

class Menubar extends React.Component{

  constructor(props){
    super();
    this.state = {
        courses: [],
        reload: false
    }
}

async componentDidMount(){
    const response = await fetch("/v1/courses/")
    const body = await response.json();
    this.setState({
        courses: body
    });
}

  render(){
    const {courses} = this.state
    return (
      <Nav className="navbar navbar-expand-md navbar-light menubarStyle fixed-top">
        <div className="container-fluid">
          <a className="navbar-brand logo" href="/">LOGO</a>
          <div className="navbar-collapse">
            <div className="navbar-nav">
              <div className="dropdown nav-item">
                <DropdownButton variant='Secondary' id="dropdown-basic-button" title="Browse Courses">
                  <Dropdown.Item as={Link} to={`/study/001`} >001</Dropdown.Item>
                  <Dropdown.Item as={Link} to={`/study/002`} >002</Dropdown.Item>
                  <Dropdown.Item as={Link} to={`/study/003`} >003</Dropdown.Item>
                </DropdownButton>
              </div>
            </div>
          </div>
        </div>
      </Nav>
      
    )
  }
}

export default Menubar

    componentDidUpdate(prevProps) {

        if( this.props.match.params.id !== prevProps.match.params.id ){
            this.setState({ courseId: this.props.match.params.id })
        };

    }