React Router：如何让同一组件识别当前路由以切换内部状态？

针对你用createBrowserRouter将同一个Backup组件挂载到不同路由的场景，以下几种方案都能让组件知晓当前路由，按推荐度排序：

1. 直接通过路由传递标识（最推荐） #

修改路由配置，给每个路由的element传入自定义属性，直接告诉组件当前的模式：

const router = createBrowserRouter([
  {
    path: "layout/backup/make",
    element: <Backup mode="make" />
  },
  {
    path: "layout/backup/restore",
    element: <Backup mode="restore" />
  }
]);

在Backup组件里直接接收props使用：

function Backup({ mode }) {
  // 直接根据mode区分业务逻辑
  return (
    <div>
      {mode === 'make' ? <div>执行备份操作</div> : <div>执行恢复操作</div>}
    </div>
  );
}

这种方式无需依赖路由钩子，代码直观，维护性强，不用硬编码路径字符串。

2. 使用useLocation钩子 #

在Backup组件中通过useLocation获取当前路径信息，判断所处路由：

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

function Backup() {
  const { pathname } = useLocation();
  
  const isMakeRoute = pathname === '/layout/backup/make';
  const isRestoreRoute = pathname === '/layout/backup/restore';

  return (
    <div>
      {isMakeRoute ? <div>备份页面</div> : <div>恢复页面</div>}
    </div>
  );
}

适合需要动态处理路径、或路径规则复杂的场景，但硬编码路径字符串后期维护需注意同步修改。

3. 使用useMatch钩子 #

通过useMatch匹配指定路由，判断是否处于该路由下：

import { useMatch } from 'react-router-dom';

function Backup() {
  const isMakeRoute = useMatch('/layout/backup/make');
  const isRestoreRoute = useMatch('/layout/backup/restore');

  return (
    <div>
      {isMakeRoute ? <div>备份页面</div> : <div>恢复页面</div>}
    </div>
  );
}

useMatch会返回匹配结果对象（匹配成功时），适合需要获取路由参数的场景，但单纯判断路由的话，比前两种稍显繁琐。

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