Question

我目前遇到的问题类似于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时，我们是否可以刷新页面？否则，是否还有其他方法可以用于此设计？也许首先使用链接不是正确的方法？

请原谅，我试图使它尽可能清晰。

谢谢！

Answer 1

在您的Study组件内部，您可以使用componentDidUpdate并将当前的prop与prevProps进行比较，以检查url是否已更改，然后更改状态，这将导致您的组件更新。或多或少，您将获得以下代码：

SELECT * 
FROM USER_MODEL 
WHERE name = 'Administrator'

React Link不会自动刷新页面

1 个答案: