父组件是/course/courseDetails,里面加了嵌套路由,在切换子路由时会触发父组件componentWillUnmount卸载,然后父组件componentDidMount重新渲染,在渲染子组件,这是为啥啊。由React Router引起的组件重复渲染谈Route的使用姿势,看到一个关于这个类似的情况,但是我没有给父组件传递props更新啊。
"react": "^16.4.0",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
<Col span={18} >
<div className='c-d-contents-l'>
<Menu onClick={this.handleClick} selectedKeys={[current]} mode="horizontal">
<Menu.Item key="/course/courseDetails/courseCatalog">目录</Menu.Item>
<Menu.Item key="/course/courseDetails/courseSetting">设置</Menu.Item>
<Menu.Item key="/course/courseDetails/studentList">名单</Menu.Item>
</Menu>
<Switch>
<Route path="/course/courseDetails/courseCatalog" component={CourseCatalog} exact={false}/>
<Route path="/course/courseDetails/courseSetting" component={CourseSetting} exact={false}/>
<Route path="/course/courseDetails/studentList" component={StudentList} exact={false}/>
</Switch>
</div>
</Col>
这是因为 react-router 的 Switch 组件在匹配到新的路由时,会卸载之前匹配的组件并挂载新的组件。因此,当你切换子路由时,父组件会被卸载并重新挂载。
要解决这个问题,可以使用嵌套路由:将子路由放在父组件内部的 Switch 中,这样父组件不会因为子路由的变化而重新挂载。
例如:
这样,父组件 /course/courseDetails 不会因为子路由的变化而重新挂载