Reactjs React router 4`Link`组件仅更改url而不更新路由

我在react router dom

Link

组件中遇到问题，该组件仅更改URL而不更新路由

从

/courses->/courses/

然后

/courses/->/courses/

但是，我在链接到其他课程时遇到问题，例如从

/lessons/->/lessons/

它似乎只更新

课程列表

组件并更新URL，但不更新路线/内容或父

课程

我已经确保将匹配、位置道具传递给组件，以防它与更新阻塞有关——但它似乎仍然不起作用

我看不出哪里出了问题，应该是相对简单的

这与我如何设置路线或具有相同路线有关吗

这是我的依赖项和代码，如果方向正确，我将不胜感激

"dependencies": {
    "axios": "^0.16.2",
    "prop-types": "^15.5.10",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-router-dom": "^4.1.2"
 }

index.js

    import css from '../css/index.scss';
    import React from 'react';
    import ReactDOM from 'react-dom';
    import { BrowserRouter as Router } from 'react-router-dom';
    import App from './components/App';

    ReactDOM.render(
      <Router>
        <App />
      </Router>
    , document.getElementById('app'));

---

此问题与componentDidMount事件有关。当你换课时它不会被解雇。因此，您应该使用componentDidUpdate来更改课程

  componentDidUpdate() {
    if (this.props.match.params.lesson !== this.state.lesson.slug)
     api.getLesson(this.props.match.params.lesson)
          .then((lesson) => {
            this.setState({
              lesson: lesson[0]
            });
          });
        }
      }

您的

组件仅在

componentDidMount

生命周期挂钩期间设置课程。如果您正在上课，并且更改了slug，则不会导致组件重新安装。您可以使用

组件willreceiveprops

生命周期挂钩来完成您所追求的目标

componentWillReceiveProps(nextProps) {
    api.getLesson(nextProps.match.params.lesson)
        .then((lesson) => {
            this.setState({
            lesson: lesson[0]
        });
    });
}

---

为什么要等到更新后才使用setState？我们也可以使用componentWillReceiveProps，这并不重要，数据将在更新后以任何方式传递到state。使用componentDidUpdate挂钩将导致额外的渲染。这并不是说这是世界上最糟糕的事情，只是不需要。我们有异步请求，所以组件在所有情况下都会呈现两次。第一个是在道具改变后，第二个是在响应和设置新状态后。这是我需要的正确方向的一点！非常感谢。虽然我需要通过更新道具才能得到新的子弹。

import React, { Component } from 'react';
import api from '../../utils/api';
import LessonsList from '../LessonsList';
import { Link } from 'react-router-dom';

class Lessons extends Component {
  constructor(props) {
    super(props);

    this.state = {
      lessons: null
    };
  }

  componentDidMount() {
    api.getAllLessons()
      .then((lessons) => {
        this.setState({
          lessons: lessons
        });
      });
  }

  render() {
    return(
      <div className="lessons">
        {!this.state.lessons ?
          <div>Loading...</div>
          :
          <div>
            <LessonsList 
              lessons={this.state.lessons}
              {...this.props}
            />
          </div>
        }
      </div>
    );
  }
}

export default Lessons;

import React, { Component } from 'react';
import api from '../../utils/api';
import LessonsList from '../LessonsList';
import { Link } from 'react-router-dom';

class Lesson extends Component {
  constructor(props) {
    super(props);

    this.state = {
      lesson: null
    }
  }

  componentDidMount() {
    api.getLesson(this.props.match.params.lesson)
      .then((lesson) => {
        this.setState({
          lesson: lesson[0]
        });
      });
  }

  render() {
    return(
      <div className="lesson">
        {!this.state.lesson ?
          <div>Loading...</div>
          :
          <div>
            <h3>Course title: {this.state.lesson.course.title}</h3>
            <h1>Lesson: {this.state.lesson.title}</h1>
            <h2>Other lessons from this course</h2>
            <LessonsList
              lessons={this.state.lesson.lessons}
              {...this.props}
            />
          </div>
        }
      </div>
    );
  }
}

export default Lesson;

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';

function LessonsList(props) {
  return(
    <ul>
      {props.lessons.map((lesson) => {
        return(
          <li key={lesson.id}>         
            <Link to={`/lessons/${lesson.slug}`}>{lesson.title}</Link>
          </li>
        );
      })}
    </ul>
  );
}

LessonsList.propTypes = {
  lessons: PropTypes.array.isRequired
}

export default LessonsList;

import React, { Component } from 'react';
import api from '../../utils/api';
import LessonsList from '../LessonsList';
import { Link } from 'react-router-dom';

class Lesson extends Component {
  constructor(props) {
    super(props);

    this.state = {
      lesson: null
    }
  }

  componentDidMount() {
    api.getLesson(this.props.match.params.lesson)
      .then((lesson) => {
        this.setState({
          lesson: lesson[0]
        });
      });
  }

  componentWillReceiveProps(nextProps) {
    if(this.props.match.params.lesson !== nextProps.match.params.lesson) {
      api.getLesson(nextProps.match.params.lesson)
        .then((lesson) => {
            this.setState({
            lesson: lesson[0]
          });
        });
    }
  }

  render() {
    return(
      <div className="lesson">
        {!this.state.lesson ?
          <div>Loading...</div>
          :
          <div>
            <h3>Course title: {this.state.lesson.course.title}</h3>
            <h1>Lesson: {this.state.lesson.title}</h1>
            <h2>Other lessons from this course</h2>
            <LessonsList
              lessons={this.state.lesson.lessons}
              {...this.props}
            />
          </div>
        }
      </div>
    );
  }
}

export default Lesson;

  componentDidUpdate() {
    if (this.props.match.params.lesson !== this.state.lesson.slug)
     api.getLesson(this.props.match.params.lesson)
          .then((lesson) => {
            this.setState({
              lesson: lesson[0]
            });
          });
        }
      }

componentWillReceiveProps(nextProps) {
    api.getLesson(nextProps.match.params.lesson)
        .then((lesson) => {
            this.setState({
            lesson: lesson[0]
        });
    });
}