Redirect to another page based on form input in Next.js

user_4690275 0
Viewed 5085

I'm just getting started with Next.js and SPA world. I'm used to PHP and plain JS so this is totally new to me.

So I have a form with basically a text input and a submit button. What I need to do is as simple as redirecting the user based on the text field they submit but I can't figure out how.

For example: the form is in the homepage, the user inputs "foo" and submits. What the result should be is that the user is redirected to "/channel/foo".

Any tip? Thank you!

next.js reactjs redirect forms javascript
3 Answers

Ok.. For this you can use useRouter hook provided by the nextjs

first you can import it

import { useRouter } from "next/router";

then you can create it's instance and use it to push the react app to new route based on the value of the given form input value

Here I am using a react state to go to new route


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>
    )
}

I hope you are familial with react and useState hook

I hope it will solve your problem

user_157819280

You can use useRouter hook to navigate to another page. For example:

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>
  )

}
user_66682470

To handle redirections in Next.js, you can use the router hook useRouter() available in any component, with push. You can find a good explanation in the documentation.

Depending on the way you handle your form, you could have a callback on the button, or handle it with the onSubmit of the form.

About react forms: react forms

About handling button click in React: react buttons

user_103464050
Related