0

Hola soy nuevo en Laravel, Inertia y React y tengo un problema al querer colocar una almohadilla "#" en el href de la etiqueta para que no me genere una petición.

<Link key={subItem.name} href={subItem?.href || "#"} className="-m-3 flex items-start rounded-lg hover:bg-gray-50">
      <subItem.icon className={`flex-shrink-0 ${menuIconDimensions} text-indigo-600`} aria-hidden="true" />
      <div className="ml-4">
           <p className="text-base font-14 text-gray-900" data-cy={`menu-${t(subItem?.name || "")}`}>{t(subItem?.name || "")}</p>
           <p className="mt-1 font-12 text-gray-500">{t(subItem?.description || "")}</p>
      </div>
</Link>

Pongo otra letra o simbolo y sí aparece menos el "#" alguna idea?

3
  • estas usando next?
    – Agustin G.
    Commented el 26 ago. 2022 a las 19:44
  • Estoy usando Inertia Commented el 27 ago. 2022 a las 0:27
  • intenta agregarla entre parensetesis? {(subItem?.href || "#")}
    – Bryro
    Commented el 27 ago. 2022 a las 1:00

2 respuestas 2

0

Si agregar el símbolo # no te funciona puedes también probar a utilizar href="javascript:void(0)" en tus etiquetas <a>.

0

Usa "#x" ("#" seguido por cualquier otra cadena) en lugar de solo "#".

¿Por qué?

Revisando el código fuente del componente Link de Inertia React se puede observar por qué al poner "#", el atributo href desaparece. Según el archivo packages/inertia-react/src/Link.js, la propiedad href enviada al componente es transformada por una función llamada mergeDataIntoQueryString que recibe varios argumentos. La función se define en packages/inertia/src/url.ts, y actualmente está definida así:

export function mergeDataIntoQueryString(
  method: Method,
  href: URL|string,
  data: Record<string, FormDataConvertible>,
  qsArrayFormat: 'indices'|'brackets' = 'brackets',
): [string, Record<string, FormDataConvertible>] {
  const hasHost = /^https?:\/\//.test(href.toString())
  const hasAbsolutePath = hasHost || href.toString().startsWith('/')
  const hasRelativePath = !hasAbsolutePath && !href.toString().startsWith('#') && !href.toString().startsWith('?')
  const hasSearch = href.toString().includes('?') || (method === Method.GET && Object.keys(data).length)
  const hasHash = href.toString().includes('#')

  const url = new URL(href.toString(), 'http://localhost')

  if (method === Method.GET && Object.keys(data).length) {
    url.search = qs.stringify(deepmerge(qs.parse(url.search, { ignoreQueryPrefix: true }), data), {
      encodeValuesOnly: true,
      arrayFormat: qsArrayFormat,
    })
    data = {}
  }

  return [
    [
      hasHost ? `${url.protocol}//${url.host}` : '',
      hasAbsolutePath ? url.pathname : '',
      hasRelativePath ? url.pathname.substring(1) : '',
      hasSearch ? url.search : '',
      hasHash ? url.hash : '',
    ].join(''),
    data,
  ]
}

Para el caso, si la propiedad href fuera "#" podemos seguir el flujo de la función, o mejor aun usar un depurador, para ver qué sucede con la propiedad. En este caso el argumento method es 'get', ya que no se está incluyendo en el elemento JSX y se usa el valor default definido para el componente, el valor de data es {} y el de qsArrayFormat es 'brackets', ambos por la misma razón. Podemos omitir las primeras líneas y ver directamente el valor de retorno, que es un arreglo de dos valores: la URL transformada y los datos si es que se quiere hacer una petición POST, etc. Observemos el primer elemento:

[
  hasHost ? `${url.protocol}//${url.host}` : '',
  hasAbsolutePath ? url.pathname : '',
  hasRelativePath ? url.pathname.substring(1) : '',
  hasSearch ? url.search : '',
  hasHash ? url.hash : '',
].join('')

El valor de "#" para href no incluye un protocolo (como http: o https:), ni un host (como en http://localhost:8000), ni una ruta (como /index.html), ni un query (como en /search?q=time); por lo anterior los cuatro primeros valores son cadenas vacías:

[
  '',
  '',
  '',
  '',
  hasHash ? url.hash : '',
].join('')

Queda revisar el valor de url.hash, donde url se define como url = new URL("#", 'http://localhost'). Si se evalúa esta expresión en la consola de JavaScript o de Node.js se genera un objeto URL así:

URL {
  href: 'http://localhost/#',
  origin: 'http://localhost',
  protocol: 'http:',
  username: '',
  password: '',
  host: 'localhost',
  hostname: 'localhost',
  port: '',
  pathname: '/',
  search: '',
  searchParams: URLSearchParams {},
  hash: ''
}

Se observa que la propiedad hash es una cadena vacía, lo que no ocurre si se usa, por ejemplo "#x":

URL {
  href: 'http://localhost/#x',
  origin: 'http://localhost',
  protocol: 'http:',
  username: '',
  password: '',
  host: 'localhost',
  hostname: 'localhost',
  port: '',
  pathname: '/',
  search: '',
  searchParams: URLSearchParams {},
  hash: '#x'
}

Finalmente, como url.hash es una cadena vacía la URL transformada queda así:

[
  '',
  '',
  '',
  '',
  '',
].join('')

Es decir, al transformarse con mergeDataIntoQueryString, href queda convertido en una cadena vacía, que puesto en un elemento HTML a equivale a un enlace a la URL actual.

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.