1

integrando React-Materialize con Nextjs obtengo un error de consola al usar Link dentro del brand de NavBar la única solución que he encontrado es solo dejar <a className="brand-logo">GG</a> sin el componente <Link> pero su renderizado es muy lento al usarlo de esa manera alguna sugerencia he intentado de todo aquí dejo el código del componente:

import { Navbar, Icon, } from 'react-materialize';
import Link from 'next/link'

const NavigationBar = () => {
  return (
    <Navbar className="teal"
      alignLinks="right"
      brand={<Link href="/"><a className="brand-logo">GG</a></Link>}
      id="mobile-nav"
      menuIcon={<Icon>menu</Icon>}
      options={{
        draggable: true,
        edge: 'left',
        inDuration: 250,
        onCloseEnd: null,
        onCloseStart: null,
        onOpenEnd: null,
        onOpenStart: null,
        outDuration: 200,
        preventScrolling: true
      }}
    >
      <Link href="Products">
        <a>Products</a>
      </Link>
      <Link href="About">
        <a>About</a>
      </Link>
      <Link href="Cart-Shop">
        <a>Cart-Shop</a>
      </Link>
    </Navbar>
  )
}

export default NavigationBar

y este es el error que arroja la consola:

Warning: Failed prop type: Link: unknown props found: className   checkPropTypes.js?a15c:20 
in Link (at NavBar.js:8)
in Navbar (at NavBar.js:6)
in NavigationBar (at Index.js:17)
in Index (at _app.jsx:7)
in MyApp
in ErrorBoundary (created by ReactDevOverlay)
in ReactDevOverlay (created by Container)
in Container (created by AppContainer)
in AppContainer
in Root

Gracias de antemano

1
  • Una de las maneras que he tratado ha sido incluir el className dentro de <Link> pero este no recibe className como props el className debe ir obligatoriomante dentro de la etiqueta<a> Commented el 24 ago. 2020 a las 15:57

1 respuesta 1

0

La forma que logre fue usar <Router>, elimine <Link> del brand y solo deje la etiqueta con un evento onClick utilizando el metodo push <a className="brand-logo" onClick={() => Router.push('/')}>GG</a> y en el css global usar el cursor pointer para la etiqueta <a> de alguna manera <Link>es un poco testarudo y no funciona dentro de algunos elementos ya que es un HOC es mi deducción a este problema , con esto se eliminaron los mensajes en la consola y cuando renderizo el brand no recarga toda la pagina aqui el codigo:

import { Navbar, Icon, } from 'react-materialize';
import Router from 'next/router'
import Link from 'next/link'

const NavigationBar = () => {
  return (
    <Navbar className="teal"
      alignLinks="right"
      brand={<a className="brand-logo" onClick={() => Router.push('/')}>GG</a>}
      id="mobile-nav"
      menuIcon={<Icon>menu</Icon>}
      options={{
        draggable: true,
        edge: 'left',
        inDuration: 250,
        onCloseEnd: null,
        onCloseStart: null,
        onOpenEnd: null,
        onOpenStart: null,
        outDuration: 200,
        preventScrolling: true
      }}
    >
      <Link href="Products">
        <a>Products</a>
      </Link>
      <Link href="About">
        <a>About</a>
      </Link>
      <Link href="Cart-Shop">
        <a>Cart-Shop</a>
      </Link>
    </Navbar>
  )
}

export default NavigationBar

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.