1
resposta

Pagina em branco ao utilizar a tag Link do react-router-dom

Oioi!

Tentei utilizar a tag no lugar da tag , mas dá erro e a pagina fica em branco. O que esta causando isso e como resolvo?

    import { ReactComponent as Logo } from 'assets/logo.svg';
import styles from './Menu.module.scss';
import { Link } from 'react-router-dom';

export default function Menu() {
    const rotas = [{
        label: 'Início',
        to: '/'
    }, {
        label: 'Cardápio',
        to: '/cardapio'
    }, {
        label: 'Sobre',
        to: '/sobre'
    }];

    return (
        <nav className={styles.menu}>
            <Logo />
            <ul className={styles.menu__list}>
                {rotas.map((rota, index) => (
                    <li key={index} className={styles.menu__link}>
                        <Link to={rota.to}>
                            {rota.label}
                        </Link>
                    </li>
                ))}
            </ul>
        </nav>
    );
}

ERRO:

Uncaught Error: useHref() may be used only in the context of a component. at invariant (history.ts:460:1) at useHref (hooks.tsx:54:1) at LinkWithRef (index.tsx:413:1) at renderWithHooks (react-dom.development.js:16305:1) at updateForwardRef (react-dom.development.js:19226:1) at beginWork (react-dom.development.js:21636:1) at beginWork$1 (react-dom.development.js:27426:1) at performUnitOfWork (react-dom.development.js:26557:1) at workLoopSync (react-dom.development.js:26466:1) at renderRootSync (react-dom.development.js:26434:1)

1 resposta

Olá, Franciane! Tudo bem?

A mensagem de erro que você compartilhou acontece quando você tem uma rota fora do contexto de roteamento. O que isso significa? Significa que no seu arquivo de rotas, onde você define qual componente/elemento renderizar para cada rota, uma dessas rotas que você está tentando acessar em

const rotas = [{
        label: 'Início',
        to: '/'
    }, {
        label: 'Cardápio',
        to: '/cardapio'
    }, {
        label: 'Sobre',
        to: '/sobre'
    }];

não está definida.

Então sugiro que você check seu arquivo de rotas e veja se está tudo certinho por lá!

Abraços!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado. ✓