Quiero pasar accesorios a una función desde la ruta, mi código actualmente se ve así
Ruta
<Route path="/person" render={(params) => <ProductDetails {...params} />} />Código
function ProductDetails(props) { return ( <div className="section has-text-centered mt-4"> console.log(props) <h1>Hello</h1> </div> ); }; export default ProductDetails;¿Qué me estoy perdiendo aquí, por favor ayuda?
En react-router-dom v6, pasa accesorios al componente enrutado directamente, ya que se pasan como ReactElement ( también conocido como JSX ).
Ejemplo:
<Route path="person" element={<ProductDetails /* pass props here */ />} /> Sin embargo, según su fragmento de ejemplo, parece que su pregunta es más específica sobre pasar los "accesorios de ruta" a un componente. En RRDv6 ya no hay accesorios de ruta, es decir, no hay accesorios de history , location ni match . Use los ganchos de React para acceder a estos: useNavigate para navegación, useLocation para location y useMatch para match y useParams específicamente para los parámetros de ruta.
import { useNavigate, useLocation, useParams } from 'react-router-dom'; function ProductDetails(props) { const navigate = useNavigate(); const location = useLocation(); const match = useMatch(); useEffect(() => { console.log(props); }, [props]); return ( <div className="section has-text-centered mt-4"> <h1>Hello</h1> </div> ); }; export default ProductDetails;Puede pasar la función con accesorios en React Router DOM V6 de esta manera:
<Route path="/person" element={<ProductDetails render={(params) => ({ ...params })} />} />Y puede pasar más accesorios como nombres fuera de la función de renderizado.
Ejemplo:
<Route path="/person" element={<ProductDetails render={(params) => ({ ...params })} user={user} />} />