1
resposta

"High Order Component" não funciona no LinkWrapper

Criei o componente : LinkWrapper.js. Como abaixo:

import React from 'react';
import { NavLink } from 'react-router-dom';

const LinkWrapper = props => {
    return (
        <NavLink activeStyle={{fontWeight: "bold"}}{...props}/>
    );
}

export default LinkWrapper;

Referenciei ele no Header.js

import React from 'react';
import { LinkWrapper } from './LinkWrapper';

const Header = () => {
    return ( 
        <nav>
            <div className="nav-wrapper indigo lighten-2">
                <LinkWrapper to="/" className="brand-logo">Casa do Código</LinkWrapper>
                <ul className="right">
                    <li><LinkWrapper to="/autores">Autores</LinkWrapper></li>
                    <li><LinkWrapper to="/livros">Livros</LinkWrapper></li>
                    <li><LinkWrapper to="/sobre">Sobre</LinkWrapper></li>
                </ul>
            </div>
        </nav>
    );
}

export default Header;

Porem quando o programa roda aparesenta o erro:

Failed to compile

./src/Header.js

Attempted import error: 'LinkWrapper' is not exported from './LinkWrapper'.

This error occurred during the build time and cannot be dismissed.
1 resposta

Fala ai Luciano, tudo bem? O problema está no Header.js na importação do LinkWrapper:

import { LinkWrapper } from './LinkWrapper';

Repare que você está tentando importar o componente como se ele não tivesse sido exportado com default.

Tente mudar para:

import LinkWrapper from './LinkWrapper';

Isso porque quando usamos export default não podemos usar as chaves ({}) e sim dar uma nome para o import direto.

Espero ter ajudado.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software