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

Question

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

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

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

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

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

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

我试着用组件WillUpdate四处看看（一种我可以看到路由器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

处理它的方法取决于您是使用通量、还原还是以您想要的方式管理您的操作。最重要的是，我会尝试使用Route组件的onChange属性（请查看React路由器文档）：

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

然后，如果您使用的是redux或无论如何是在通量中完成的，请在某个方法中创建操作。redux将是：

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

以及带有redux存储的onIntHandler：

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

然后在ProductDetail组件中打印新信息（需要在redux和redux sagas库中进行更多的学习才能完成这一部分）。

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