React使用HashRouter时手动修改URL参数页面不更新如何解决

问题根因 #

你的问题出在Film组件的useEffect依赖项配置错误。
当前你给useEffect传的是空依赖数组[]，这会导致这个拉取影片数据的副作用仅在组件首次挂载时执行1次。当你手动修改地址栏的影片ID参数时，因为路由匹配的是同一个/film/:id规则，Film组件不会被销毁重建，只会接收新的路由参数，这时候useEffect不会触发重新执行，自然不会拉取新ID对应的影片数据。
这个问题和你使用HashRouter、部署在AWS都没有关系，属于组件逻辑配置错误。

修复方案 #

只需要把路由参数id加入useEffect的依赖数组即可，这样每次id变化时就会自动重新执行拉取数据的逻辑：

useEffect(() => {
  async function getFilmPoster() {
    setFilmPoster(await getIMDbFilmPoster(id));
    let response = await fetch(`${getFilmByIDURL}/${id}`, {
      method: 'get'
    });
    response = await response.json();
    setFilm(response);
  }
  getFilmPoster();
}, [id]); // 这里把id加入依赖数组

可选优化 #

建议增加副作用清理逻辑，避免快速切换ID时出现竞态问题（旧请求晚返回覆盖新数据）：

useEffect(() => {
  const controller = new AbortController();
  const signal = controller.signal;

  async function getFilmPoster() {
    try {
      setFilmPoster(await getIMDbFilmPoster(id));
      let response = await fetch(`${getFilmByIDURL}/${id}`, {
        method: 'get',
        signal
      });
      if (!signal.aborted) {
        const res = await response.json();
        setFilm(res);
      }
    } catch (e) {
      if (e.name !== 'AbortError') console.error('拉取影片失败', e);
    }
  }
  getFilmPoster();

  // id变化/组件卸载时取消未完成的请求
  return () => controller.abort();
}, [id]);

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