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

Posted 2023-02-21

【中文标题】更改 url 参数时反应路由器不重新加载组件

【英文标题】：React router not reloading Component when changing url params

【发布时间】：2017-02-23 12:37:55

【问题描述】：

我知道它不是 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 ?
            
        );
;

【参考方案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 来解决所有这些问题不仅不推荐，而且还会弄乱您的代码。

【讨论】：

谢谢你，我想我正在寻找 onEnter，我会编辑我的问题 ;)

这取决于你使用的是什么，如果是 redux 或 Flux。我不知道通量，但我会发布 redux 示例。