[Sugestão] Evento de clique apenas no Botão

Olá,

Vi que o evento de OnClick para voltarmos à página anterior, estava aplicada em toda div que tem a classe className={styles.botaoContainer}, fazendo com que ao clicar em qualquer lugar dela, a ação do click acionaria a função para voltar a página.

Como alternativa, alterei os arquivos index.js do BotaoPrincipal e NaoEncontrada da seguinte maneira:

BotaoPrincipal : criei a função voltarPagina() que retorna navegar(-1). Feito isso, mando como prop para o componente BotaoPrincipal, assim: acao={voltarPagina}.

export default function NaoEncontrada() {

    const navegar = useNavigate()

    function voltarPagina() {
        return navegar(-1)
    }

    return (
        <>
            <div className={styles.conteudoContainer}>
                <span className={styles.texto404}>404</span>
                <h1 className={styles.titulo}>Ops! Página não encontrada.</h1>
                <p className={styles.paragrafo}>
                    Tem certeza de que era isso que você estava procurando?
                </p>
                <div className={styles.botaoContainer}>
                    <BotaoPrincipal tamanho="lg" acao={voltarPagina}>
                        Voltar
                    </BotaoPrincipal>
                </div>
            </div>

            <div className={styles.espacoEmBranco}>

            </div>
        </>
    )
}

NaoEncontrada: basta receber a prop acao e acionar o evento OnClick nela.

export default function BotaoPrincipal({ children, tamanho, acao }) {
    return (
        <button className={`${styles.botaoPrincipal} ${styles[tamanho]}`} onClick={acao}>
            {children}
        </button>
    )
}