如何在路径 url 中将 id 作为组件属性在反应路由器 v6 中传递

Question

我正在使用 React Hooks 和 React Router v6 更新一个过时的教程项目。我想将路径 url 中的 id 传递给组件属性..

function App() {
  const findPalette = (id) => {
    return colorsData.find((palette) => palette.id === id);
  };

  return (
    <Routes>
      <Route path="/" element={<h1>Palette List goes here!</h1>} />
      <Route path="/palette/:id" element={<Palette palette={generatePalette(findPalette(requiredID))} />} />
    </Routes>
  );
}

我应该做什么来代替 'requiredID' 来完成它？

这是教程中的代码

<Route 
  exact 
  path='/palette/:id' 
  render={routeProps => <Palette palette={generatePalette(this.findPalette(routeProps.match.params.id))} />} 
/>

我在文档中找到了useParams()，但它是在传递给元素的函数组件内部使用的属性

function ProfilePage() {
  // Get the userId param from the URL.
  let { userId } = useParams();
  // ...
}

function App() {
  return (
    <Routes>
      <Route path="users">
        <Route path=":userId" element={<ProfilePage />} />
        <Route path="me" element={...} />
      </Route>
    </Routes>
  );
}

Answer 1

创建一个包装 useParams:

的自定义挂钩

const usePalette = () => {
  const { userId: id } = useParams();

  return useMemo(() => colorsData.find(palette => palette.id === id), []);
}

function ProfilePage() {
  const palette = usePalette();
  // ...
}

如果您无法更改 ProfilePage 创建一个使用挂钩的包装器组件 (ProfilePageWrapper)，并让它渲染 ProfilePage.

const ProfilePageWrapper () => {
  const palette = usePalette();
  
  return <ProfilePage palette={palette} />;
}

然后在路由中使用wrapper:

<Route path="/palette/:id" element={<ProfilePageWrapper />} />

如何在路径 url 中将 id 作为组件属性在反应路由器 v6 中传递

How to pass id in path url as component property in react router v6

javascript

reactjs

react-router

react-hooks

如何在路径 url 中将 id 作为组件 属性 在反应路由器 v6 中传递

How to pass id in path url as component property in react router v6

javascript

reactjs

react-router

react-hooks

如何在路径 url 中将 id 作为组件属性在反应路由器 v6 中传递