react动态子路由不触发componentDidMount生命周期的解决

目录

应用场景

为什么不用子组件代替子路由

不触发生命周期原因

解决方法

---

应用场景

适用于列表页样式和交互相同，列表页只需根据tab的不同id调用对应列表的情况。比如下图

为什么不用子组件代替子路由

业务需要不同的tab对应不同的链接，链接可以分享给其他人直接查看。

不触发生命周期原因

componnetDidMount是在页面初次加载渲染的时候触发，而父路由改变tab时，列表页子路由组件已经渲染了，所以不会触发。

解决方法

父组件引用子路由时，给子路由的渲染组件加一个key即可，key是唯一的。

<Route path="/list/:id" render={props => (
	(<ChildrenList {...props} key={props.location.pathname} />)
)}/>

此处的props.location.pathname是我打印this.props之后，发现的一个符合key值要求的值，这个可以根据具体项目来，不过既然是动态子路由，我觉得这个值应该都是不一样的，可以作为key值。