Next.js Discord

Discord Forum

How to do a full refresh and remove all query parameters

Unanswered
berkserbet posted this in #help-forum
Open in Discord
berkserbetOP
I basically want to be able to click a button and get everything as fresh. Right now, when I refresh my search box still has the previous text in it.

26 Replies

CollertJK
Does putting a link on a button without query parameters work?
@CollertJK Does putting a link on a button without query parameters work?
berkserbetOP
It doesn't, I have a button that does router.push('/'), which removes the query params - but I have to manually refresh the page to actually remove the info
The button is a client component
A redirect('') in a server component also doens't work
This is my search component:
'use client'

import { useRouter } from 'next/navigation'
import { useState } from 'react'
import { SanitizedProductSearchParams } from '@/types/products';

interface Props {
    initialParams: SanitizedProductSearchParams
}

const SearchProducts = ({ initialParams }: Props) => {

    var search_value = initialParams.search

    // NextJs Navigation
    const router = useRouter()
    let queryParams: URLSearchParams;

    const [search, setSearch] = useState(search_value || '')

    // Handle Submitting
    const handleSubmit = (e: any) => {
        e.preventDefault()
        if (typeof window !== "undefined") {
          queryParams = new URLSearchParams(window.location.search);
        }

        queryParams.delete("pages");
        if (search === '') {
            queryParams.delete('search');
        } else {
            queryParams.set('search', search);
        }
        const path = window.location.pathname + "?" + queryParams.toString();
        router.push(path);
    }

    return (
        <form>
            <input type="text" placeholder="Search" className="input input-sm rounded-none input-primary w-40 md:w-64 focus:outline-none" onChange={(e) => setSearch(e.target.value)} defaultValue={search}/>
            <button className="btn btn-sm btn-primary btn-outline rounded-l-none px-2 md:px-4" type='submit' onClick={handleSubmit}>🔍</button>
        </form>
    )
}

export default SearchProducts
CollertJK
I kinda tried to implement X button and it works,but has some bugs if you will use it with debounced callback
here's code sample
'use client';
import {Icon} from '@iconify/react';
import {usePathname, useRouter, useSearchParams} from "next/navigation";
import {useDebouncedCallback} from "use-debounce";
import Link from "next/link";
import {useState} from "react";

export function Search({search}: { search: string }) {
  const searchParams = useSearchParams();
  const pathName = usePathname();
  const [city,setCity] = useState(searchParams.get('query')?.toString());
  const {replace} = useRouter();

  const handleChange = (value:string) => {
    // const { value } = e.target;
    setCity(value);
    changeParams(value);
  };
  
  function setParams(value: string) {
    const params = new URLSearchParams(searchParams);
    if (value) {
      params.set('city', value);
    } else {
      params.delete('city');
    }
    replace(`${pathName}?${params.toString()}`);
  }
  const changeParams = useDebouncedCallback((value: string) => {
    setParams(value);
  }, 300);
  function clearParams() {
    const params = new URLSearchParams(searchParams);
    replace(`${pathName}`);
    setCity("");
  }
  return (
    <div className="relative rounded-lg ">
      <div className="relative">
        <button onClick={()=>clearParams()} className="text-white text-2xl">X</button>
        <label htmlFor="city" className="block mb-2 text-sm font-medium text-white">SEARCH A CITY</label>
        <input type="text" id="city"
               className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-red-500 focus:border-red-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-red-500 dark:focus:border-red-500"
               placeholder="New York"
               value={city}
               onChange={(e) => handleChange(e.target.value)}
               // defaultValue={searchParams.get('query')?.toString()}
        />
      <Icon icon="icons8:search"
            className="text-black fill-black absolute right-4 bottom-[15%] transform w-6 h-6"/>
      </div>
    </div>
  )
}
berkserbetOP
I can get that sort of x button to work
But I need it to be a global thing
Because it refreshed multiple things
I that possible @CollertJK
CollertJK
what do you mean by global thing?
@CollertJK what do you mean by global thing?
berkserbetOP
Part of different component than the search one
CollertJK
do you use any state manager?
to empty the input, you need to reset the state of the input's value, so if it's outside the component there are basically not a lof of ways to do it(at least I don't know others). Either to use prop drilling or global state to reset the value of input from another component
Is there a way to do a hard refresh on the site?
@berkserbet Is there a way to do a hard refresh on the site?
CollertJK
router.reload() (pages router) / router.refresh() (app router)
@CollertJK router.reload() (pages router) / router.refresh() (app router)
berkserbetOP
But I also want to remove the query params
CollertJK
const pathName = usePathname();
...


replace(`${pathName}`);
I don't think refreshing the page helps
@CollertJK I don't think refreshing the page helps
berkserbetOP
But manually refreshing solves it
https://nuqs.47ng.com/
it allows you to manage search params as state
so you can clear everything
and not require a refresh either :sunglasses_1: