React Router v6中useMatch()无法正常使用问题求助

错误原因 #

React Router v6 中 useMatch API 与 v5 完全不同：

• v5 中 useMatch 可无参调用，自动匹配当前路由；
• v6 中 必须传入明确的路径匹配模式，无参调用会返回 undefined，导致解构 url/pathname 时报错。

同时你的代码还存在两个 v6 适配问题：

1. Route 组件必须通过 element 属性传递内容，不能直接将组件作为子元素；
2. 嵌套路由路径应使用相对路径，无需手动拼接父路由路径。

修复步骤及代码示例 #

1. 修正 useMatch 调用与路由写法 #

传入当前组件对应的路由路径模式（需根据你的实际路由配置调整，示例为 /business/:businessSlug），同时修正 Route 的使用方式：

import React, { useEffect } from 'react';
import { Route, Routes, useMatch, useParams } from "react-router-dom";
import { businessDetail } from "../../../../redux/actions/business";
import {
  BusinessSettingTeamButtons,
  BusinessSettingTeamBody
} from "./BusinessPageTeam";

function BusinessPage (props) {
  const { businessSlug } = useParams();
  // 传入当前组件的路由匹配模式，避免无参调用返回 undefined
  const match = useMatch('/business/:businessSlug');
  // 使用可选链避免解构 undefined 报错
  const url = match?.pathname;

  // 直接使用 useParams 获取的参数，无需 useState 存储
  useEffect(() => {
    props.businessDetail(businessSlug);
    // 依赖数组添加 businessSlug，确保参数变化时重新请求数据
  }, [props.businessDetail, businessSlug])

  // 修正 Route 写法：使用 element 属性传递组件，子路由用相对路径
  const bodies = (
    <div>
      <Routes>
        <Route path="" element={businessSettingProfileBody} />
        <Route path="team" element={businessSettingTeamBody} />
        <Route path="settings" element={businessSettingBody} />
      </Routes>
    </div>
  );

  return (
    <div>
      {businessSettingTeamButtons}
      {bodies}
    </div>
  )
}

function mapStateToProps(state) {
  return {
    business: state.business,
  }
}

export default connect(mapStateToProps, { businessDetail })(BusinessPage);

2. 优化子组件（可选） #

子组件可使用相对路径跳转，无需从父组件传递 url，简化代码：

export function BusinessSettingTeamButtons (props) {
  return (
    <nav>
      <Link
        className="btn btn-link"
        onClick={() => props.setSettings('profile')}
        to="."
      >
        Profile
      </Link>
      <Link
        className="btn btn-primary"
        onClick={() => props.setSettings('team')}
        to="team"
      >
        Team
      </Link>
      <Link
        className="btn btn-link"
        onClick={() => props.setSettings('settings')}
        to="settings"
      >
        Settings
      </Link>
    </nav>
  );
}

关键说明 #

• 若不确定当前组件的路由模式，可通过 useLocation() 获取当前路径后，结合实际路由结构调整 useMatch 的参数；
• 嵌套路由中，父路由需确保路径以 /* 结尾（如 /business/:businessSlug/*），才能匹配子路由；
• 可选链操作符（?.）用于避免 match 为 undefined 时的报错，提升代码健壮性。

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