在 React 中重新渲染组件时如何更改 url？答案

【问题标题】：How to change the url when rerendering a component in React?在 React 中重新渲染组件时如何更改 url？
【发布时间】：2021-07-08 11:55:52
【问题描述】：

我的 React 应用每页显示 20 部电影，您可以更改页面。当页面改变时，它会改变状态，调用不同的 API 并渲染新的 20 部电影，但这一切都在一个页面上动态发生。有没有办法让 url 从moviewebsite.com 更改为moviewebsite.com/page2 等等？我希望人们能够按浏览器/手机中的后退按钮返回其他页面

【问题讨论】：

标签： reactjs web react-hooks

【解决方案1】：

This link 将帮助您安装并了解react-router-dom 的基础。

This link 将帮助您了解如何将参数作为路由的一部分传递。

至于如何维护您的history，有一个prop.history 可以跟踪您的浏览器网址历史记录。您可以像在这个函数中那样动态推送路由：

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

您的路径可以指向任何组件

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

现在可以通过props.match.params在任何组件中访问您的movieId

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

【讨论】：

【解决方案2】：

这是一个使用react-router-dom的简单示例：

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

【讨论】：

【解决方案3】：

使用react-router-dom 可能是您的答案的解决方案。

【讨论】：