【问题标题】：React Router "Link to" does not load new data when called from inside the same component从同一组件内部调用时，React Router“链接到”不会加载新数据
【发布时间】：2016-10-19 08:46:35
【问题描述】：

背景

我正在构建一个包含以下详细信息的应用

反应
反应路由器
redux
它是通用的javascript
节点js

问题

当使用Link 标签从一个组件路由到另一个组件时，它可以完美运行。它调用组件所需的数据并呈现页面。但是当我点击使用与当前组件相同的组件的Link 时，我看到的只是 url 更改。

尝试

我试图让它发挥作用的事情。

尝试 1

到目前为止，我已经尝试了this 问题中的步骤，但该解决方案对我不起作用。这是我实现的代码

componentWillReceiveProps(nextProps) {
    if (nextProps.article.get('id') !== this.props.article.get('id')) {
        console.log('i got trigggerd YESSSSSSSSSSSSSSS');
    }
}

但是变量nextProps总是和当前的props一样。

尝试 2

我决定调用我在componentWillMount 中使用的相同代码，但这也不起作用。

componentWillMount() {
    let { category, slug } = this.props.params;
    this.props.loadArticleState({ category, slug });
}

当我将它放入componentWillReceiveProps 时，它只会创建一个无限循环。

结论

我认为问题在于单击链接永远不会调用与之关联的数据。由于数据已加载

static fetchData({ store, params }) {
    let { category, slug } = params;
    return store.dispatch(loadArticleState({ category, slug }));
}

感谢任何帮助。

【问题讨论】：

也许试试强制pushing 新的历史记录？
这个应该推到哪里？在主要文章组件中还是在Link to 标签中？
而不是<Link>，它将是一个带有onClick 的元素（例如按钮、跨度）触发.push(/* whatever was in to= */)

标签： reactjs redux react-router

【解决方案1】：

我使用的解决方案

我创建了一个函数来测试之前的数据是否与更改的数据相同。

compareParams(prevProps, props) {
    if (!prevProps || typeof prevProps.params !== typeof props.params) {
        return false;
    }
    return Object.is(props.params, prevProps.params);
}

所以这个测试

有以前的道具吗？
然后props是否与之前的props相等？
如果有的话就返回false
如果不是，那么我们会看到比较 props 和以前的 props 参数

在 ComponentDidUpdate 中

在compoonentDidUpdate中我们使用这个函数来判断数据是否应该更新

componentDidUpdate(prevProps) {
    if (this.compareParams(prevProps, this.props)) {
        return;
    }
    this.props[this.constructor.reducerName](this.props.params);
}

结论

如果接收到新数据，此代码会更新使用相同 React 组件的页面正文。

【讨论】：

【解决方案2】：

也许您可以尝试在 Route 组件上使用 onChange 事件，检查Route API，然后向子组件发出需要刷新的信号...

【讨论】：