React Router v6中如何用useParams()替代match.params？

核心问题：类组件无法直接使用 React Hooks（包括useParams），所以需要调整组件结构，以下提供两种可行方案：

方案一：将 App 改为函数组件（推荐，贴合 v6 函数式风格） #

import React from "react";
import Palette from "./Palette";
import Seeds from "./Seeds";
import { makePalette } from "./ColorHelpers.js";
import { Route, Routes, useParams } from "react-router-dom";

// 封装调色板查找逻辑
const findPalette = (id) => {
  return Seeds.find(palette => palette.id === id);
};

// 单独处理路由参数的子组件
const PaletteRoute = () => {
  const { id } = useParams();
  const palette = makePalette(findPalette(id));
  return <Palette palette={palette} />;
};

export default function App() {
  return (
    <Routes>
      <Route path="/" element={<h1>PALETTE LIST GOES HERE</h1>} />
      <Route path="/palette/:id" element={<PaletteRoute />} />
    </Routes>
  );
}

说明：

• 移除类组件结构，改用函数组件适配 Hooks 规则
• 抽离PaletteRoute组件专门处理路由参数与调色板逻辑，代码职责更清晰
• React Router v6 中Route默认精确匹配，无需再写exact属性

方案二：保留 App 类组件，抽离函数式子组件 #

如果不想改动原有类组件结构，可以单独新增函数组件承接路由参数：

import React, { Component } from "react";
import Palette from "./Palette";
import Seeds from "./Seeds";
import { makePalette } from "./ColorHelpers.js";
import { Route, Routes, useParams } from "react-router-dom";

// 抽离处理路由参数的函数组件
const PaletteWrapper = () => {
  const { id } = useParams();
  const palette = makePalette(Seeds.find(p => p.id === id));
  return <Palette palette={palette} />;
};

export default class App extends Component {
  render() {
    return (
      <Routes>
        <Route path="/" element={<h1>PALETTE LIST GOES HERE</h1>} />
        <Route path="/palette/:id" element={<PaletteWrapper />} />
      </Routes>
    );
  }
}

说明：

• 保留原有 App 类组件结构，仅新增PaletteWrapper处理路由参数
• 直接在 Route 的element属性中渲染该子组件，替代 v4 中的render方法

内容的提问来源于stack exchange，提问作者Harry 2gks