React应用如何监听URL变化并触发对应自定义操作？

你在组件中定义的location是组件初始化时一次性读取window.location.href赋值的普通变量，没有和路由更新机制绑定，所以URL变化后不会自动更新，以下是对应解决方案：

方案1：获取自动更新的URL值 #

使用react-router内置的useLocation钩子拿到响应式的location对象，URL变化时它会自动更新：

// Page1组件代码
import { useLocation, Link } from 'react-router-dom';

function Page1() {
  // location为响应式对象，URL变化时自动更新
  const location = useLocation();
  // 完整URL取值为 location.href
  const currentHref = location.href;

  return (
    <div>
      <p>this is "/page1"</p>
      <p>当前URL：{currentHref}</p>
      <Link to="/page1/2">
        <p>Click to change</p>
      </Link>
    </div>
  );
}

注意：如果需要/page1/2也能匹配到Page1组件，需要将路由配置修改为<Route path='/page1/*'><Page1 /></Route>，否则跳转后组件会卸载。

方案2：URL变化时触发自定义操作 #

配合useEffect监听location的变化，即可在URL更新时执行任意自定义逻辑：

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

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

  useEffect(() => {
    // 这里写你的自定义操作
    console.log('url changed', location.href);
    alert('url changed');
    // 也可以手动更新你自定义的变量
    // yourCustomLocation = location.href
  }, [location]); // 依赖项填写location，每次URL变化都会触发回调

  return (
    <div>
      <p>this is "/page1"</p>
      <Link to="/page1/2">
        <p>Click to change</p>
      </Link>
    </div>
  );
}

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