简述React-Router 4怎样在路由变化时重新渲染同⼀个组件 ?

React Router 4 默认情况下,当一个组件的 props 发生变化时,React 会重新渲染该组件。然而,如果组件的路由参数改变时,例如从 “/detail/1” 跳转到 “/detail/2″,React Router 4 不会认为这是同一个组件,所以不会触发组件的更新,而是会销毁旧组件,创建新组件。

如果我们希望在路由变化时重新渲染同一个组件,我们可以使用 component 属性的替代品 render 属性。render 属性接受一个函数,这个函数返回需要渲染的组件。由于这个函数在每次渲染时都会被调用,所以可以保证组件在路由参数改变时重新渲染。

以下是一个例子:

<Route
  path="/detail/:id"
  render={(props) => <DetailPage {...props} />}
/>

在这个例子中,DetailPage 组件会在每次路由变化时重新渲染,即使是从 “/detail/1” 跳转到 “/detail/2″。props 参数包含了所有传递给 Route 的 props,包括路由信息,例如 matchlocationhistory

发表评论

后才能评论