React Router v6下替换useRouteMatch获取URL参数的方案咨询

在React Router v6中，useRouteMatch被移除后，官方推荐用useParams钩子直接获取URL中的参数，以下是针对你代码的具体修改方案：

1. 替换导入语句 #

把原来的useRouteMatch导入换成useParams：

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

2. 修改参数获取逻辑 #

将原代码中通过useRouteMatch获取参数的代码：

const { params } = useRouteMatch<RepositoryParams>();

替换为：

const params = useParams<RepositoryParams>();

useParams会直接返回匹配到的路由参数对象，你之前定义的RepositoryParams接口可以直接复用。

完整修改后的组件代码 #

import React, { useEffect, useState } from 'react';
import { useParams, Link } from 'react-router-dom';
import { FiChevronLeft, FiChevronRight } from 'react-icons/fi';
import api from '../../services/api';

import { Header, RepositoryInfo, Issues } from './styles';
import logoImg from '../../assets/logo.svg';

interface RepositoryParams {
  repository: string;
}

interface Repository {
  full_name: string;
  description: string;
  stargazers_count: number;
  forks_count: number;
  open_issues_count: number;
  owner: {
    login: string;
    avatar_url: string;
  };
}

interface Issue {
  id: number;
  title: string;
  html_url: string;
  user: {
    login: string;
  };
}

const Repository: React.FC = () => {
  const [repository, setRepository] = useState<Repository | null>(null);
  const [issues, setIssues] = useState<Issue[]>([]);

  const params = useParams<RepositoryParams>();

  useEffect(() => {
    // 加个判空处理，避免参数未匹配时触发错误请求
    if (!params?.repository) return;
    
    api.get(`repos/${params.repository}`).then((response) => {
      setRepository(response.data);
    });

    api.get(`repos/${params.repository}/issues`).then((response) => {
      setIssues(response.data);
    });
  }, [params?.repository]);
  
  // 后续组件渲染逻辑...
};

额外注意 #

要确保你的路由配置里定义了对应的参数占位符，比如：

<Route path="/repos/:repository" element={<Repository />} />

只有这样useParams才能正确捕获到repository参数。

内容的提问来源于stack exchange，提问作者Cristiano Pereira da Silva