Next.js Discord

Discord Forum

Update url query on scroll

Answered
Havana posted this in #help-forum
Open in Discord
HavanaOP
Hi everyone, I am trying to update the url query based on the current section and update the sidebar active link, like on this page https://www.toolify.ai/category
What would be the best approach ? I have tried router.push with a ref and id on each section but without success.
Answered by American Crow
Use SerachParams and an intersection observer .
Here is a quick example with a ?search query parameter.
(Sorry too lazy to rewrite it)

"use client"
export default function Search() {
    const searchParams = useSearchParams() 
    const {replace} = useRouter()

    const handleChange = (value: string) => {
        const params = new URLSearchParams(searchParams)
        params.set("search", value)
        replace(`?${params.toString()}`)
    }

    return (
        <div>
            <h1>Search</h1>
            <input type="text" placeholder="Search..." onChange={(e)=>handleChange(e.target.value)} />
        </div>
    )
}

The idea for your use case is the same, instead of a handleChange you need an intersection observer. That way you will know where the user has scrolled to at the page. Accordingly add and remove the query parameters (searchParams) to the URL.
View full answer

5 Replies

@Havana Hi everyone, I am trying to update the url query based on the current section and update the sidebar active link, like on this page https://www.toolify.ai/category What would be the best approach ? I have tried router.push with a ref and id on each section but without success.
B33fb0n3
I like to use useQueryState from nuqs. You can configure if it's just updated clientside or if there should be a new network request. The only difficult thing that I see there is: when to update the url.

Take a look at nuqs here: https://nuqs.47ng.com/
American Crow
Use SerachParams and an intersection observer .
Here is a quick example with a ?search query parameter.
(Sorry too lazy to rewrite it)

"use client"
export default function Search() {
    const searchParams = useSearchParams() 
    const {replace} = useRouter()

    const handleChange = (value: string) => {
        const params = new URLSearchParams(searchParams)
        params.set("search", value)
        replace(`?${params.toString()}`)
    }

    return (
        <div>
            <h1>Search</h1>
            <input type="text" placeholder="Search..." onChange={(e)=>handleChange(e.target.value)} />
        </div>
    )
}

The idea for your use case is the same, instead of a handleChange you need an intersection observer. That way you will know where the user has scrolled to at the page. Accordingly add and remove the query parameters (searchParams) to the URL.
Answer
B33fb0n3
Yea, that smart. So you can directly use the searchparams and modify your url like zomh mentioned.

If you would like to have an easier way of updating it, you can use nuqs like I mentioned.

And to set the correct url on scroll, you can use the intersection observer 👍
B33fb0n3
@Havana solved?
HavanaOP
@B33fb0n3 Yes, solved. I didn't use Nuqs though. It's working but it's a bit janky due to the page refresh on every section change. Thanks for the help !