简述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,包括路由信息,例如 match
、location
和 history
。