Question

当我点击导致加载完全相同组件的页面的链接时，我似乎无法触发除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'));

这是我的App 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!的链接时，我会看到我的网络浏览器地址栏中的网址会相应更新。但我的componentDidMount不会触发。因此，不会获取或加载新内容。

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

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

Answer 1

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

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

Answer 2

我认为通过componentWillReceiveProps（不建议使用）提出的解决方案不够好。这是一个hack。为什么不将路径ID保持在状态（如/ blog / ：id ）。

然后这样：

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

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

2 个答案: