Estoy empezando con Next.js y SPA world. Estoy acostumbrado a PHP y JS simple, así que esto es totalmente nuevo para mí.
Así que tengo un formulario con básicamente una entrada de texto y un botón de envío. Lo que debo hacer es tan simple como redirigir al usuario en función del campo de texto que envía, pero no sé cómo.
Por ejemplo: el formulario está en la página de inicio, el usuario ingresa "foo" y lo envía. El resultado debería ser que el usuario sea redirigido a "/channel/foo".
¿Algún consejo? ¡Gracias!
Ok ... Para esto, puede usar el enlace useRouter provisto por nextjs
primero puedes importarlo
import { useRouter } from "next/router";
luego puede crear su instancia y usarla para empujar la aplicación de reacción a una nueva ruta según el valor del valor de entrada del formulario dado
Aquí estoy usando un estado de reacción para ir a una nueva ruta
import {useRouter} from 'next/router' import {useState} from 'react' export default function SampleComponent(){ const router = useRouter() const [route, setRoute] = useState() const handleSubmit = (e) => { e.preventDefault() router.push("someBasePath/" + route) } return( <div> <h1>Example Form</h1> <form onSubmit={handleSubmit}> <input type="text" name='route' onChange={(e)=>{setRoute(e.target.value)}} /> <button type="submit">Submit</button> </form> </div> ) }Espero que estés familiarizado con react y useState hook
espero que resuelva tu problema
Puede usar el enlace useRouter para navegar a otra página. Por ejemplo:
import { useRouter } from "next/router"; const Component = () => { const [inputValue, setInputValue] = useState(""); const router = useRouter(); const onChange = e => { setInputValue(e.target.value); } const handleSubmit = e => { e.preventDefault(); router.push(`/channel/${inputValue}`) } return ( <form onSubmit={handleSubmit}> <input onChange={onChange} /> </form> ) }Para manejar las redirecciones en Next.js, puede usar el enlace del enrutador useRouter() disponible en cualquier componente, con push . Puede encontrar una buena explicación en la documentación .
Dependiendo de la forma en que maneje su formulario, podría tener una devolución de llamada en el botón o manejarlo con onSubmit del formulario.
Acerca de las formas de reacción: formas de reacción
Acerca del manejo del clic del botón en React: botones de reacción