En el enrutador de reacción v6, ¿cómo puedo pasar parámetros de ruta a un componente sin la necesidad de usar useParams() en el componente?
Esto es lo que quiero hacer:
<Route path='/' element={ProfileComponent username={'thedefault'} /> <Route exact path='/u/:username/' render={(props) => <ProfileComponent username={props.match.params.username}/> } /> No quiero poner useParams() en el componente porque esto lo acopla estrechamente a la URL. Por ejemplo, ¿qué pasaría si quisiera representar otro ProfileComponent en otro lugar, con un nombre de usuario diferente al de la URL? Parece violar las mejores prácticas para las pruebas unitarias a menos que pueda hacerlo como mi ejemplo.
No quiero poner
useParams()en el componente porque esto lo acopla estrechamente a la URL. Por ejemplo, ¿qué pasaría si quisiera representar otro ProfileComponent en otro lugar, con un nombre de usuario diferente al de la URL? Parece violar las mejores prácticas para las pruebas unitarias a menos que pueda hacerlo como mi ejemplo.
Cualquier ruta que use un parámetro de coincidencia de ruta de nombre de username aún sería accesible a través del useParams , pero creo que entiendo lo que está buscando. Si entiendo su pregunta correctamente, está preguntando cómo asignar un parámetro de coincidencia de ruta a un accesorio de componente de una manera genérica.
Para esto, simplemente puede usar un componente contenedor para "sorber" el parámetro de coincidencia de ruta y pasarlo a su componente en cualquier accesorio específico.
const ProfileComponentWrapper = () => { const { username } = useParams(); return <ProfileComponent username={username} />; };...
<Route path='/u/:username/' element={<ProfileComponentWrapper />} />En los documentos, se especifica claramente que no es posible
Normalmente en React pasarías esto como accesorio: , pero no controlas esa información porque proviene de la URL.
https://reactrouter.com/docs/en/v6/getting-started/tutorial#reading-url-params
Entonces, debe usar useParams en el componente