0
177
VistasCómo proporcionar props personalizados dinámicos para React Router 6.4+ Route
Estoy tratando de proporcionar accesorios personalizados dinámicos a una definición de ruta de React Router utilizando el React Router 6.4 más nuevo. No puedo encontrar ningún ejemplo para mostrar cómo puedo lograr esto. Estos serían accesorios que se proporcionan desde el componente principal de la declaración RouterProvider .
Un ejemplo de la documentación oficial para 6.0 - 6.3:
// Ah, nice and simple API. And it's just like the <Suspense> API!
// Nothing more to learn here.
<Route path=":userId" element={<Profile />} />
// But wait, how do I pass custom props to the <Profile>
// element? Oh ya, it's just an element. Easy.
<Route path=":userId" element={<Profile animate={true} />} />
En 6.4, su definición de ruta se parece a algo como:
// How do I provide animate state from App component to Policy component?
const router = createBrowserRouter([{ path: '/', element: <Profile animate={animate} /> }];
export function App() {
const [animate, setAnimate] = useState(true);
return <RouterProvider router={router} />
}
1 Respuestas
Responde la pregunta0
En el ejemplo que proporcionó, ya está pasando un objeto animate al componente enrutado. RRDv6.4.0 no cambió la API del componente Route . Parece que su pregunta es más bien sobre pasar un valor prop dinámico cuando se accede a la ruta.
Mueva la declaración del router al componente de la App para que el estado animate esté dentro del alcance.
Ejemplo:
function App() {
const [animate, setAnimate] = useState(true);
const router = createBrowserRouter([
{ path: "/", element: <Profile animate={animate} /> } // <-- pass prop value
]);
return (
<div className="App">
...
<RouterProvider router={router} />
</div>
);
}
