Detailed explanation of the solution to changing the Url parameter in React-Router without refreshing

question

Today, I found a problem when writing the page, which is that the Url parameter transfer function is used in React Router, like this:

export class MainRouter extends  {
  render() {
    return (
      <BrowserRouter>
        <Switch>
          ...
          <Route exact path={'/channel/:channelId'} component={ChannelPerPage}/>
          ...
        </Switch>
      </BrowserRouter>
    );
  }
}

According to the official documentation, it can be used in the ChannelPerPage component.

To get the value of the url parameter, but I found that if you only change the parameters in the url under this url, for example, when the channelId changes from 1 to 2, the page will not be refreshed.

Solution

After reviewing the information, I found that the fundamental reason is that the change of props will not cause the component to be re-rendered. Only the changes in state will cause the component to be re-rendered. The url parameter belongs to props, so changing the url parameter will not cause the component to be re-rendered.

Later I found that there is a rewriteable method in React's component

componentWillReceiveProps(nextProps) {
 ...
}

This method can be rewrited in the React component, and this method will be called when props are changed, so you can use this method to get nextProps and modify the content of the state in this method, so that the component can be rendered again.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.