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还是想要管理你的行为。最重要的是，我会尝试使用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来解决所有这些问题不仅不推荐，而且会使代码陷入困境。

更改url params

1 个答案: