How to change the url when rerendering a component in React?

Question

My React App shows 20 movies per page and you can change pages. When the page is changed, it changes states, calls different APIs and renders new 20 movies but it all happens dynamically on one page. Is there a way to make the url change from like moviewebsite.com to moviewebsite.com/page2 and so on? I want people to be able to press the back button in their browser/phone to go back to other page

Answer 1

Here is a simple example using react-router-dom:

https://codesandbox.io/s/react-router-basic-forked-4mytm

Answer 2

This link will help you install and go over the basics of react-router-dom.

This link will help you understand how to pass parameters as a part of your route.

As far as how to maintain your history, there is a prop.history that keeps track of your browsers url history. You can dynamically push routes like in this function:

const handleMovieNavigation = () => {
    var movieId = 20;
    props.history.push({
        pathname: '/movie/ '+ movieId
    });
}

Your path can point to any component

<Route path="/movie/:movieId" component={MoviePage}/>

And your movieId can now be accessed in any component via props.match.params

export default class MoviePage extends Component {
  render() {
    return(
      <div>
        <h2>{this.props.match.params.movieId}</h2>
      </div>
    )
  }
}