import { useRouter } from "next/router"; export default function PostAll() { const router = useRouter(); const { all } = router.query; return ( <div> <h1>Post: {all.join("/")}</h1> </div> ); } wait - compiling... event - compiled client and server successfully in 32 ms (176 modules) error - pages/post/[...all].js (9:21) @ PostAll TypeError: Cannot read properties of undefined (reading 'join') 7 | return ( 8 | <div> > 9 | <h1>Post: {all.join("/")}</h1> | ^ 10 | </div> 11 | ); 12 | } { "dependencies": { "next": "12.0.7", "react": "17.0.2", "react-dom": "17.0.2" }, }Soy muy principiante y estoy aprendiendo viendo conferencias en línea. No puedo entender por qué recibo un error en este código corto.
router.query por defecto es un objeto vacío {} , así que después de const { all } = router.query; , all es undefined . Y no puede llamar a join a undefined , como le indica el error. El problema real es que OP está navegando a "localhost: 3000/post/hello/world" pero aún obtiene una excepción de puntero nulo. La razón de esto es que el componente se renderizó previamente con un objeto vacío y luego se volvió a renderizar con la matriz. Este comportamiento se encuentra en la documentación vinculada a continuación. "[Consulta] será un objeto vacío durante la representación previa si la página no tiene requisitos de obtención de datos". Entonces, lo que OP necesita es solo una verificación nula.
La documentación para el router estáaquí.
return ( <div> <h1>Post: {all && all.join("/")}</h1> </div> );