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

Question

我知道它不是 react-router 的默认行为/功能来帮助我们轻松地重新加载当前组件，但我在我的应用程序中确实需要它。

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

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

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

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

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

我试图用 componentWillUpdate 环顾四周（一种我可以看到路由器 URI 发生变化的方法 :D），但我无法在其中设置状态来重新加载我的组件（它似乎不是一个好的练习）

知道我怎样才能完成这项工作吗？

编辑：根据第一个答案，我必须使用 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 还是您想要管理您的操作。最重要的是，我会尝试使用 Route 组件的 onChange 属性（检查React router docs）：

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

然后在 someMethod 中创建操作，如果您使用的是 redux 或者是在不断变化的情况下完成。 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 来解决所有这些问题不仅不推荐，而且还会弄乱您的代码。