更改url参数时，React路由器不重新加载组件

Question

我知道这不是react-router的默认行为/特性，可以帮助我们轻松地重新加载当前组件，但我真的需要在我的应用程序中使用它。

我的应用程序处理产品。我有一个可以加载的产品列表，当我单击一个项目时，它会显示相关的产品详细信息。

在该页面上，我有加载相同组件的相关产品链接，但包含另一个产品详细信息，位于

<Route path="/products/:id/details" component={ProductDetail} />

我正在获取componentWillMount中的数据，似乎如果只更改URL，就不会挂载新的组件，因此，我总是显示旧数据，而不获取任何内容。

作为一个使用React的初学者，我正在寻找一些帮助，或者一些技巧来重新加载与该页面相关的组件。我的意思是能够用好的产品重新加载ProductDetail。

我尝试使用componentWillUpdate (一种方法，我可以看到路由器URI发生了变化:D)，但是我无法在其中使用setState来重新加载我的组件(这似乎根本不是一个好的做法)

你知道我该怎么做吗？

编辑:根据第一个答案，我必须使用onEnter。我现在坚持将状态/属性传递给相关组件的方式：

const onEnterMethod = () => {
    return fetch(URL)
        .then(res => res.json())
        .then(cmp => {
            if (cmp.length === 1) {
             // How to pass state / props to the next component ?
            }
        });
};

Answer 1

处理它的方式取决于你是使用flux，redux，还是你想要管理你的操作的方式。最重要的是，我会尝试使用路由组件的onChange属性(检查React router docs)：

    <Route path="/products/:id/details" component={ProductDetail} onChange={someMethod} />

然后在someMethod中创建操作，如果您使用的是redux，或者是在flux中完成的操作。redux将是：

    <Route path="/products/:id/details" component={ProductDetail} onEnter={onEnterHandler(store)} />

和带有redux存储的onEnterHandler：

    function onEnterHandler(store) {
      return (nextState, replace) => {
        store.dispatch({
          type: "CHANGEPRODUCT",
          payload: nextState.params.id
        })
      };
    }

然后在您的ProductDetail组件中打印新的信息(需要更多地学习redux和redux-sagas库才能完成这一部分)。

请记住，React只是视图部分，尝试仅使用react来解决所有这些问题不仅是不推荐的，而且还会弄乱您的代码。