Tengo una ruta NextJS catch all que se detiene
import { useRouter} from 'next/router'Y recupera todos los parámetros:
const { params = [] } = router.query Si registro el valor de los params , veo todos los elementos de la ruta de URL en la consola.
Me gustaría repetir todos los valores de params en una lista desordenada:
return <ul> {params.map((param) => { <li>{param}</li> })} </ul>Pero esto no produce nada. No hay elementos mostrados.
¿Cómo puedo hacer que esto muestre la lista?
Con llaves, también deberá escribir la palabra clave de retorno.
return <ul> {params.map((param) => { return (<li>{param}</li>); })} </ul>Así es como funcionan las funciones de flecha en JS.
Con el código actual, básicamente no hay una declaración de devolución. Entonces, por defecto , se devuelve undefined y no se representa nada:
return <ul> {params.map((param) => { <li>{param}</li> //No return statement })} </ul>Para abreviar: puede quitar las llaves.
return <ul> {params.map((param) => <li>{param}</li>)} </ul>Creo que tienes un problema con tu función .map . Intenta hacer esto en su lugar:
return params.map((param) => param);Esto simplemente imprimirá sus parámetros juntos en una sola línea. Puedes improvisar el formato en el que realmente lo querrías.