React Router中URL变化时页面不刷新怎么办？/movie/:movieID路由场景

该问题由React Router的组件复用机制导致：当跳转前后的路由匹配同一个组件时，React不会销毁原有组件实例，仅更新组件的传入属性。如果你把电影详情的获取逻辑写在组件初始化阶段（如函数组件空依赖的useEffect、类组件的componentDidMount），逻辑只会在首次进入页面时执行一次，后续路由参数movieID变更时不会重新触发，因此会出现URL更新但页面内容不变的情况。

解决方案 #

方案1：绑定key强制组件重渲染（改造成本最低） #

直接给路由配置中的MoviePage组件绑定和movieID关联的key属性，路由参数变化时会自动销毁旧组件、重新挂载新组件，原有组件逻辑不需要修改：

<Route name="movie" path="/movie/:movieID" exact>
  <MoviePage key={window.location.pathname} />
</Route>

方案2：监听路由参数变化触发数据更新（性能更优） #

不需要销毁组件，仅调整数据请求的触发逻辑即可：

函数组件场景

将movieID加入useEffect的依赖数组，参数变更时自动重新拉取电影数据：

import { useParams, useState, useEffect } from 'react-router-dom'

function MoviePage() {
  const { movieID } = useParams()
  const [movieInfo, setMovieInfo] = useState(null)

  useEffect(() => {
    // 替换为你实际的电影详情请求逻辑
    const getMovieDetail = async () => {
      const response = await fetch(`/your-api-path/movie/${movieID}`)
      const data = await response.json()
      setMovieInfo(data)
    }
    getMovieDetail()
  }, [movieID]) // movieID变化时重新执行副作用

  // 原有渲染逻辑保持不变
}

类组件场景

通过componentDidUpdate生命周期监听参数变化：

import { withRouter } from 'react-router-dom'

class MoviePage extends React.Component {
  state = { movieInfo: null }

  componentDidMount() {
    this.getMovieDetail(this.props.match.params.movieID)
  }

  componentDidUpdate(prevProps) {
    // 前后movieID不一致时重新拉取数据
    if (prevProps.match.params.movieID !== this.props.match.params.movieID) {
      this.getMovieDetail(this.props.match.params.movieID)
    }
  }

  getMovieDetail = async (movieID) => {
    // 替换为你实际的电影详情请求逻辑
    const response = await fetch(`/your-api-path/movie/${movieID}`)
    const data = await response.json()
    this.setState({ movieInfo: data })
  }

  // 原有渲染逻辑保持不变
}
export default withRouter(MoviePage)

内容的提问来源于stack exchange，提问作者HughMungus