Estoy actualizando un proyecto de tutorial obsoleto usando ganchos de reacción y enrutador de reacción v6. Quiero pasar la identificación en la URL de la ruta a la propiedad del componente.
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> ); }¿Qué debo hacer en lugar de 'requiredID' para hacerlo?
Aquí está el código en el tutorial.
<Route exact path='/palette/:id' render={routeProps => <Palette palette={generatePalette(this.findPalette(routeProps.match.params.id))} />} />Encontré useParams() en la documentación, pero se usa dentro del componente de función pasado a la propiedad del elemento
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> ); }Cree un gancho personalizado que envuelva useParams :
const usePalette = () => { const { userId: id } = useParams(); return useMemo(() => colorsData.find(palette => palette.id === id), []); } function ProfilePage() { const palette = usePalette(); // ... } Si no puede cambiar ProfilePage , cree un componente contenedor ( ProfilePageWrapper ) que use el enlace y deje que represente ProfilePage .
const ProfilePageWrapper () => { const palette = usePalette(); return <ProfilePage palette={palette} />; }Luego usa el contenedor en la ruta:
<Route path="/palette/:id" element={<ProfilePageWrapper />} />