在 React 中重新渲染組件時如何更改 url？

Question

我的 React App 每頁顯示 20 部電影，你可以換頁。 當頁面更改時，它會更改狀態、調用不同的 API 並呈現新的 20 部電影，但這一切都在一個頁面上動態發生。 有沒有辦法讓 url 從像 moviewebsite.com 變成 moviewebsite.com/page2 等等？ 我希望人們能夠按瀏覽器/手機中的后退按鈕 go 返回其他頁面

Answer 1

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

Answer 2

這是一個使用react-router-dom的簡單示例：

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

Answer 3

此鏈接將幫助您安裝和 go了解react-router-dom的基礎知識。

此鏈接將幫助您了解如何將參數作為路由的一部分進行傳遞。

至於如何維護您的history ，有一個prop.history可以跟蹤您的瀏覽器 url 歷史記錄。 您可以像 function 那樣動態推送路由：

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

您的路徑可以指向任何組件

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

你的 movieId 現在可以通過props.match.params在任何組件中訪問

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