0
283
Views¿La etiqueta Next-JS Link no se redirige correctamente?
Estoy tratando de aprender Next-JS y estoy haciendo un pequeño proyecto experimental para familiarizarme. Sin embargo, parece que algo va mal con la etiqueta de enlace. Redirige a la página de amigos especificada, pero por alguna razón, el contenido de la página sigue siendo el mismo que en casa. Y al hacer clic en el enlace de prueba mientras está en esta página, intenta redirigir no a "#", sino a "amigos #".
¿Hay algo que no estoy entendiendo aquí? Cualquier ayuda sería apreciada. Aquí está mi conde:
índice.tsx:
import Link from 'next/link'; import styles from '../styles/Home.module.css' const HomePage = () => { // const handleClick = (e: Event) => { // e.preventDefault() // router.push('./friends') // alert(router) return ( <div className={styles.div}> <h1 className={styles.h1}>WELCOME TO HOME PAGE</h1> <ul className={styles.ul}> <li className={styles.li}> <Link href='/friends'> <a>FRIENDS</a> </Link> </li> <li className={styles.li}> <Link href="#"> <a>TEST</a> </Link> </li> </ul> </div> ) } export default HomePageamigos.tsx:
import Link from 'next/link' const Friends = () => { return ( <div> <h1>WELCOME TO FRIENDS</h1> <Link href="/"> RETURN TO HOME </Link> </div> ) } export default Friends;_app.tsx:
import '../styles/globals.css' import type { AppProps } from 'next/app' import HomePage from '../pages/index' function MyApp({ Component, pageProps }: AppProps) { return <HomePage /> } export default MyAppLas capturas de pantalla de lo que estoy viendo se enumeran a continuación. Tenga en cuenta las direcciones URL.
página de inicio
página de amigos
Después de hacer clic en el enlace Prueba, cuyo href es actualmente "#"
1 answers
Answer question0
Está viendo la misma página en todos los enlaces porque siempre está mostrando el mismo componente, que es <Homepage /> . En su lugar, debe representar el component con pageProps para mostrar la página correcta de acuerdo con la URL.
El código actualizado del componente _App debería ser algo como, donde necesita mostrar el Component disponible a través de los accesorios.
import '../styles/globals.css' import type { AppProps } from 'next/app' function MyApp({ Component, pageProps }: AppProps) { return <Component {...pageProps} /> } export default MyApp También eche un vistazo a los documentos de Next.js con respecto a la _app personalizada, para ver las opciones/características disponibles listas para usar.
De los documentos: el Component prop es la página activa, por lo que cada vez que navega entre rutas, el Component cambiará a la nueva page . Por lo tanto, cualquier apoyo que envíe a Component será recibido por la página.
pageProps es un objeto con los accesorios iniciales que se preloaded para su página mediante uno de nuestros métodos de obtención de datos; de lo contrario, es un objeto vacío.