React router not recognizing a new :flag with history.push()

Question

I have a route:

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

where the :videoId is the id of a certain object in the db. When the StudentVideoContainer loads it will fetch the video embed url from the db and play it inside a playlist. When the video finishes I want to go to the next video in the playlist. However when I use

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

the url updates from say /single-course/351/v/999 to /single-course/351/v/1000 but the component doesn't reload. So I tried just navigating to another page, one which is just /single-course/351 and this does work. What I think is happening is the router isn't recognizing that I've changes pages because the urls are the same between videos, expect for the :videoId flag. Anyone have an answer to how to fix this?

Answer 1

Component does not reload, becuase the route resolves to the same component - so the component does dot unmount.

You have to add some mechanism, that will track the change of the route param in StudentVideoContainer component - I bet that You fetch the videos just after first render ( like componentDidMount ), but You have to also do some logic on componentDidUpdate .