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}`);
        }

url 從/single-course/351/v/999到/single-course/351/v/1000但組件不會重新加載。 所以我嘗試導航到另一個頁面，該頁面只是/single-course/351並且這確實有效。 我認為正在發生的事情是路由器沒有意識到我已經更改了頁面，因為視頻之間的 url 是相同的，除了:videoId標志。 任何人都有如何解決這個問題的答案？

Answer 1

組件不會重新加載，因為路由解析為相同的組件 - 因此組件不會點卸載。

您必須添加一些機制，該機制將跟蹤StudentVideoContainer組件中路由參數的更改 - 我敢打賭，您在第一次渲染后獲取視頻（如componentDidMount ），但您還必須對componentDidUpdate執行一些邏輯。