React Link 不会自动刷新页面答案

【问题标题】：React Link doesn't refresh page automaticallyReact Link 不会自动刷新页面
【发布时间】：2020-10-06 10:28:42
【问题描述】：

我目前遇到了类似于React Link doesn't refresh the page 的问题，但是，答案不适用于我的情况。

看，我目前正在使用 react-router 来创建一个名为 'study/:id' 的路径。这个 :id 变量只会打印在页面上

这是我的 BrowserRouter (App.js) 的代码

import React from 'react';
import './App.css';
import HomePage from './HomePage/HomePage';
import Study from './StudyPage/Study';
import {BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function App() {
 return (
   <Router>
     <Switch>
         <Route path="/" exact={true} component={HomePage}/>
         <Route path="/Study/:id" exact={true} component={Study} />
     </Switch>
   </Router>
 );
}

export default App;

在 Study 组件本身内部，它基本上只有一个菜单栏和一个指示我们在哪个 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;

为了让用户浏览学习页面，我使用了这样的菜单栏组件（Menubar.js）

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

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

问题

我遇到的问题是，一旦我已经进入“/study/001”页面（就像上图一样）。如果我尝试从 menuBar 单击 DropdownItem 002，则 URL 将更改为“study/002”，但页面不会更改。它不会刷新。

React Link doesn't refresh the page 的解决方案基本上说要使用 windows.location.reload() 但这在我的情况下不起作用，如果我们这样做，当我点击 dropdownItem 002 时，URL 将更改为 'study/ 002' 一会儿，然后'study/001' 将刷新，从而使页面回到 001

我的问题是，有没有办法让我们在链接更改 url 时刷新页面？或者如果没有，还有其他方法可以用于这个设计吗？也许一开始就不是使用链接的正确方式？

请原谅这篇长文，我尽量说清楚。

谢谢！

【问题讨论】：

标签： reactjs react-router-dom

【解决方案1】：

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

    componentDidUpdate(prevProps) {

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

    }

【讨论】：