防止針對React Router參數的每個URI重新呈現

Question

給定以下路線，如果添加或更改了URI查詢（即?bar2=foo ），則MySpecialComponent將重新呈現，即使未將其設置為捕獲這些參數也是如此：

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

當整個使用時，這會導致大量的重新渲染。 如何忽略不必要的參數？ 也就是說，直到我們關心更改（ /foo/:bar ）之前，才觸發重新渲染。

Answer 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}/>
)}/>