防止使用 React Router 参数的每个 URI 重新渲染答案

【问题标题】：Prevent re-render with every URI for React Router params防止使用 React Router 参数的每个 URI 重新渲染
【发布时间】：2018-09-12 11:58:46
【问题描述】：

鉴于以下路由，如果添加或更改了 URI 查询（即?bar2=foo），则即使未设置为捕获这些参数，MySpecialComponent 也会重新呈现：

<Route exact path="/foo/:bar" render={props => (<MySpecialComponent/>)}/>

这会在整个使用过程中导致大量的重新渲染。如何忽略不需要的参数？ IE。在我们关心更改的位（/foo/:bar）之前不触发重新渲染。

【问题讨论】：

标签： reactjs react-native react-router

【解决方案1】：

我发现在 route 上使用 render 以及自己传递参数是最干净的解决方案（不污染路由器逻辑的容器）：

<Route exact path="/foo/:bar" render={props => (
  // Only pass needed props to avoid unnecessary re-render on ANY URI change
  <MySpecialComponent bar={props.match.params.bar}/>
)}/>

【讨论】：