javascript - React 路由器无法识别新的 :flag with history. Push()

Question

我有一条路线:

<PrivateRoute path={'/single-course/:courseId/v/:videoId'} exact  component={StudentVideoContainer}/>

其中:videoId是数据库中某个对象的ID。当 StudentVideoContainer 加载时，它将从数据库中获取视频嵌入 URL 并在播放列表中播放。视频播放完毕后，我想转到播放列表中的下一个视频。但是当我使用

    if (this.state.nextVideo){
            this.props.history.push(`/single-course/${this.props.course.id}/v/${this.state.nextVideo.id}`);
        }

网址从 /single-course/351/v/999 更新为 /single-course/351/v/1000 但组件不会重新加载。所以我尝试导航到另一个页面，其中一个页面只是 /single-course/351 并且这确实有效。我认为正在发生的情况是路由器无法识别我已更改页面，因为视频之间的网址相同，除了 :videoId 标志。有人知道如何解决这个问题吗？

Answer 1

组件不会重新加载，因为路由解析为同一组件 - 因此该组件不会点卸载。

您必须添加一些机制，该机制将跟踪 StudentVideoContainer 组件中路由参数的变化 - 我敢打赌，您会在第一次渲染后立即获取视频(例如 componentDidMount > )，但是您还必须对 componentDidUpdate 执行一些逻辑。