Next.js Discord

Discord Forum

Trying to implement search that redirect

Answered
berkserbet posted this in #help-forum
Open in Discord
berkserbetOP
Hi all, I am trying to create a search box that redirect to /u/{searchterm}

'use client'

import { redirect } from 'next/navigation'
import { useState } from 'react'

const SearchAuthorContainer = () => {

    // React States
    const [search, setSearch] = useState('')

    // Handle Submitting
    const handleSubmit = (e: any) => {
        e.preventDefault()
        redirect(`/u/${search}`)
    }

    return (
        <form>
            <input type="text" placeholder="User Search" className="input input-sm input-bordered input-primary max-w-xs mt-1 w-36 md:w-60" onChange={(e) => setSearch(e.target.value)} defaultValue={search}/>
            <button className="btn btn-sm btn-primary btn-outline m-0.5" type='submit' onClick={handleSubmit}>Search</button>
        </form>
    )
}

export default SearchAuthorContainer


It isn't working for some reason. Anyone have an idea why?
Answered by Standard Chinchilla
'use client'

import { useRouter } from 'next/navigation'
import { useState } from 'react'

const SearchAuthorContainer = () => {
    const router = useRouter()
    // React States
    const [search, setSearch] = useState('')

    // Handle Submitting
    const handleSubmit = (e: any) => {
        e.preventDefault()
        router.push(`/u/${search}`)
    }

    return (
        <form>
            <input type="text" placeholder="User Search" className="input input-sm input-bordered input-primary max-w-xs mt-1 w-36 md:w-60" onChange={(e) => setSearch(e.target.value)} defaultValue={search}/>
            <button className="btn btn-sm btn-primary btn-outline m-0.5" type='submit' onClick={handleSubmit}>Search</button>
        </form>
    )
}

export default SearchAuthorContainer
View full answer

5 Replies

Standard Chinchilla
You are going to want to use "useRouter" from 'next/navigation'
Standard Chinchilla
'use client'

import { useRouter } from 'next/navigation'
import { useState } from 'react'

const SearchAuthorContainer = () => {
    const router = useRouter()
    // React States
    const [search, setSearch] = useState('')

    // Handle Submitting
    const handleSubmit = (e: any) => {
        e.preventDefault()
        router.push(`/u/${search}`)
    }

    return (
        <form>
            <input type="text" placeholder="User Search" className="input input-sm input-bordered input-primary max-w-xs mt-1 w-36 md:w-60" onChange={(e) => setSearch(e.target.value)} defaultValue={search}/>
            <button className="btn btn-sm btn-primary btn-outline m-0.5" type='submit' onClick={handleSubmit}>Search</button>
        </form>
    )
}

export default SearchAuthorContainer
Answer
berkserbetOP
Amazing, thank you
Standard Chinchilla
My pleasure