React Router dom 更改历史记录而不更改组件答案

【问题标题】：React Router dom change history without changing the componentReact Router dom 更改历史记录而不更改组件
【发布时间】：2021-10-21 16:26:27
【问题描述】：

简单来说，我需要知道react router dom是否有History.pushState()之类的东西

详细

我有一个初始 url 为 /home/1/1 的组件。每次用户单击按钮时，路由应更改为/home/1/2、/home/1/3。我需要它根据路径的变化重新渲染。我想不通。现在，我认为History.pushState() 可能工作，但仍然想知道是否有任何其他解决方案，有或没有反应路由器 dom

【问题讨论】：

标签： reactjs react-router-dom

【解决方案1】：

如果您想根据路由渲染组件，那么执行history.push() 是正确的解决方案。

如果您正在使用功能组件，则考虑使用useHistory 挂钩来检索历史以推送新路由（请参阅example），并使用useParams 挂钩来检索路由参数（请参阅example)。

如果您使用的是类组件，则可以将组件包装在 withRouter 高阶组件中以访问历史记录并检索参数（请参阅example）。

【讨论】：

【解决方案2】：

假设需要重新渲染的组件的路由在 Route 组件的路径属性中定义为“home/1/:id”，例如。

在 YourComponent 中，您可以捕获路由器道具，并且可以将其添加为 useEffect 的依赖项。您也可以使用“useParams”挂钩来检索 params 对象。

 const YourComponent = (routerProps) =>{

 useEffect(()=>{
  //your logic
 }, [routerProps.params.id])

}

【讨论】：