React Router 4 无法使用 <Link> 在同一组件上加载新内容答案

【问题标题】：React Router 4 can not load new content on same component with <Link>React Router 4 无法使用 <Link> 在同一组件上加载新内容
【发布时间】：2018-01-04 21:04:08
【问题描述】：

当我单击指向加载完全相同组件的页面的链接时，我似乎无法触发除 render() 之外的任何其他反应组件生命周期方法，即使 URL 不同。这是我的代码

//index.js - the entry point
import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter, Route } from 'react-router-dom';
import Config from './Settings/Config';
import App from './Components/App';

const c = new Config();
render(
  <BrowserRouter basename={c.routerBaseName}>
    <App />
  </BrowserRouter>
, document.getElementById('root'));

这是我的应用 JS

//  Components/App.js

import React, {Component} from 'react';
import {Route} from 'react-router-dom';

import BlogEntry from './BlogEntry';

export default class App extends Component {
  render() {

    console.log('app');
    return (
        <div>
          <Route exact path="/blog/:name" component={BlogEntry} />
        </div>
    )
  }
}

这是我的 BlogEntry.js

// Components/BlogEntry.js
import React from 'react';
import { Link } from 'react-router-dom';

export default class BlogEntry extends React.Component {

  async componentDidMount() {
    const [r1] = await Promise.all([
        fetch(`http://api.myservice.com/${this.props.match.params.name}`)
    ]);
    this.setState({content:await r1.json()});
    console.log('fetch');
  }
  render() {
    console.log('render');
    if(!this.state) return <div></div>;
    if(!this.state.content) return <div></div>;

    const content = this.state.content;

    return (
      <div id="blog-entry" className="container">
          <h1>{content.title}</h1>
          <div dangerouslySetInnerHTML={{__html:content.content}}></div>
          <div className="related-other">
          <h2>Related Content</h2>
          <ul>
            <li><Link to="/blog/new-york-wins-the-contest">New York Wins the Contest!</Link></li>
            <li><Link to="/blog/toronto-with-some-tasty-burgers">Toronto with Some Tasty Burgers</Link></li>
          </ul>
          </div>
      </div>

    );
  }
}

所以发生的情况是，当我单击 Toronto with Some Tasty Burgers 或 New York Wins the Contest! 的链接时，我会在我的网络浏览器地址栏中看到相应的 URL 更新。但是我的 componentDidMount 没有触发。因此不会获取或加载新内容。

React 也不允许我将 onPress 事件处理程序放入 <Link> 对象。即使我这样做了，如果我要创建自己的 onpress 事件处理程序来加载页面，管理浏览器单击返回按钮时的历史状态将是一场噩梦。

所以我的问题是，我该如何做到这一点，以便单击其中一个链接实际上会导致组件获取新数据并重绘并成为浏览器后退按钮历史记录的一部分？

【问题讨论】：

标签： react-router-v4

【解决方案1】：

我将此添加到我的 BlogEntry.js 中，现在一切正常：

  componentWillReceiveProps(nextProps) {
      this.props = nextProps;
  }

【讨论】：

【解决方案2】：

我认为您通过 componentWillReceiveProps（已弃用）提出的解决方案不够好。这是一个黑客。为什么不将路由 id 保持在状态中（如 /blog/:id）。

然后是这样的：

componentDidUpdate() {
     const { match: { params: { id: postId } = {} } } = this.props;
     if(this.state.postId !== postId) {
       // fetch content
    }
}

【讨论】：