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

user_13202032 0
Viewed 188

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

react-hooks reactjs web
3 Answers

Using react-router-dom may be a solution for your answer.

user_91415950
user_137749920

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>
    )
  }
}
user_82452180
Related