如何在Reach Router中监听路由变化？分页组件未重渲染求助

我之前也碰到过一模一样的情况，核心问题是你的Visited组件没有感知到路由参数id的变化——组件挂载后，路由参数更新不会自动触发重渲染，得主动监听或者用React Router提供的hooks来处理。下面是几个靠谱的解决办法：

1. 用useParams Hook（推荐，React Router v6+） #

这是最直接的方案，React Router的useParams会自动订阅路由参数的变化，只要参数更新，组件就会重新渲染。在你的Visited组件里这么用：

import { useParams } from 'react-router-dom';
import { useEffect } from 'react';

function Visited() {
  // 拿到路由里的:id参数，对应你链接里的1、2
  const { id } = useParams();

  // 每当id变化时，重新请求对应页的数据
  useEffect(() => {
    // 这里替换成你获取分页数据的函数
    loadVisitedPageData(id);
  }, [id]); // 把id作为依赖，id变了就重新执行

  return (
    // 渲染第id页的内容
    <div>当前是第{id}页</div>
  );
}

2. 用useLocation监听整个路径变化 #

如果你需要监听完整的路径变化（不只是参数），可以用useLocation Hook，它会返回当前的路由位置对象，一旦路径变化就会触发更新：

import { useLocation } from 'react-router-dom';
import { useEffect } from 'react';

function Visited() {
  const location = useLocation();

  useEffect(() => {
    // 从路径里解析出页码，比如从"/visited/page/2"里拿到2
    const pageId = location.pathname.split('/').pop();
    loadVisitedPageData(pageId);
  }, [location]); // 依赖location，路径变化就执行

  return (
    // 组件内容
  );
}

3. 修正路由配置的小问题 #

看你的路由配置，Redirect的to属性好像少了前缀，应该改成绝对路径，不然会跳转到根路径下的page/1，而不是visited下的子路径：

<Router>
  <Visited path="/visited/page/:id" />
  <AllCountries path="/all" />
  <Map path="/map" />
  {/* 修正to的路径为绝对路径 */}
  <Redirect from="/visited" to="/visited/page/1" />
</Router>

总结 #

优先用useParams，它是React Router专门为路由参数设计的API，代码最简洁，也最符合React Hooks的设计思路。只要组件里用到了useParams返回的参数，路由参数变化时组件就会自动重渲染，分页内容就能正常更新了。

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