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.
{(subItem?.href || "#")}