este es mi componente de botón:
import React from "react"; import { useNavigate } from "react-router"; import { KeyboardArrowLeft } from "@material-ui/icons"; import { Button } from "@mui/material"; import "./Buttons.css"; export const BackButton = () => { const navigate = useNavigate(); return ( <Button onClick={() => navigate(-1)} className="back-button" size="large" startIcon={<KeyboardArrowLeft />} /> ); };Actualmente se usa en todas las rutas que tengo. En algunas rutas, quiero que el botón vuelva a navegar a -2 páginas (pero quiero que -1 sea el valor predeterminado), ¿debo volver a escribir el código en el evento onClick o cómo hago esto posible?
Puede crear un accesorio con un valor predeterminado de 1 y luego usar ese accesorio cuando llama a navigate() :
import PropTypes from 'prop-types'; const BackButton = ({navigateTo = 1}) => { const navigate = useNavigate(); return ( <Button onClick={() => navigate(-navigateTo)} className="back-button" size="large" startIcon={<KeyboardArrowLeft />} /> ); }; BackButton.propTypes = { navigateTo: PropTypes.number }; export BackButton; Lo anterior utiliza la asignación de desestructuración con un valor predeterminado para establecer el valor de navigateTo a 1 si no se especifica.
Cuando usa su componente BackButton , puede pasar a través de la cantidad de navigateTo a:
<BackButton navigateTo={2} /> Si no especifica el accesorio de navigateTo , volverá a 1 de forma predeterminada
<BackButton />Puede obtener la ubicación con el gancho useLocation y usarlo en su onClick .
import { useLocation, useNavigate } from "react-router-dom"; export const BackButton = () => { const navigate = useNavigate(); const location = useLocation(); return ( <Button onClick={() => (location.pathname === "x" ? navigate(-2) : navigate(-1))} /> ); };