React Hooks调色板应用：如何在父组件(App.js)获取路由参数id

针对你的需求，这里提供两种React Router v6+下的可行方案，直接在父组件(App.js)中拿到路由参数id，无需通过子组件传递：

方案一：使用useMatch Hook直接获取参数 #

useMatch可以匹配指定路由路径，返回包含参数的匹配对象，在父组件中直接调用即可拿到id：

// App.js
import { Routes, Route, useMatch } from 'react-router-dom';
import Palette from './Palette';
import { useState, useEffect } from 'react';

function App() {
  const [palette, setPalette] = useState(null);
  // 匹配目标路由，获取参数id
  const match = useMatch('/palette/:id');
  const colorId = match?.params.id;

  useEffect(() => {
    if (colorId) {
      // 调用获取调色板的函数，替换成你的实际接口/逻辑
      const fetchPalette = async () => {
        const res = await fetch(`/api/palettes/${colorId}`);
        const data = await res.json();
        setPalette(data);
      };
      fetchPalette();
    }
  }, [colorId]);

  return (
    <Routes>
      <Route 
        path="/palette/:id" 
        element={<Palette palette={palette} />} 
      />
      {/* 其他路由... */}
    </Routes>
  );
}

export default App;

方案二：在路由配置中通过element传递处理后的props #

如果不想在App组件根级别使用useMatch，也可以封装一个中间组件统一处理参数和数据获取：

// App.js
import { Routes, Route, useParams } from 'react-router-dom';
import { useState, useEffect } from 'react';
import Palette from './Palette';

// 封装带数据获取逻辑的中间组件
const PaletteWrapper = () => {
  const [palette, setPalette] = useState(null);
  const { id } = useParams();

  useEffect(() => {
    if (id) {
      // 你的调色板获取逻辑
      fetch(`/api/palettes/${id}`)
        .then(res => res.json())
        .then(data => setPalette(data));
    }
  }, [id]);

  return <Palette palette={palette} />;
};

function App() {
  return (
    <Routes>
      <Route path="/palette/:id" element={<PaletteWrapper />} />
      {/* 其他路由... */}
    </Routes>
  );
}

export default App;

为什么之前的子组件传值方法无效？ #

你之前尝试的父组件传setColorId给子组件设置state的方式，问题在于路由切换时，子组件的useParams获取到新id后调用setColorId，但父组件的state更新可能滞后于路由渲染，导致调色板数据无法及时同步。而直接在父组件或中间组件通过路由Hook获取参数，能保证参数和数据获取的时机一致，避免异步更新的问题。

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