Filtrado de Búsquedas en URL con React Router

Clase 26 de 30 • Curso de React.js: Navegación con React Router

Resumen

¿Qué reto nos propone con React Router?

React Router es una herramienta poderosa para manejar la navegación en aplicaciones React. En esta clase, enfrentamos un interesante reto que consiste en mejorar y personalizar la experiencia de búsqueda de una aplicación ya existente. La meta es que aquello que escribamos en la barra de búsqueda se refleje directamente en la URL, y que este cambio también sea funcional al revés: que al modificar la URL se actualice el contenido automáticamente. Este tipo de funcionalidad es fundamental para replicar experiencias de usuario intuitivas y efectivas, comunes en plataformas como Platzi y YouTube.

¿Cuál es el problema actual?

Filtro de búsqueda: Actualmente, la aplicación permite filtrar elementos en función de lo que se escribe en una barra de búsqueda. Por ejemplo, al escribir "cortar", aparecen solo los elementos que coinciden con ese criterio.
URL estática: La URL no refleja los criterios de búsqueda realizados. Sin importar lo que escribas en la barra de búsqueda, la URL permanece igual.
Búsqueda basada en la URL: Si intentamos acceder a una URL que debería mostrar un resultado basado en un término de búsqueda (por ejemplo, "search=Patito"), la página devuelve un estado de "not found" o no encontrado, en lugar de mostrar los elementos filtrados relativos a "Patito".

¿Cómo solucionarlo?

Para abordar este reto, la clave está en hacer dinámicas tanto la URL como la barra de búsqueda. Esto implica lo siguiente:

Actualización de la URL al buscar:
- Actualiza la URL para reflejar el término de búsqueda en forma de hash o query string.
- Utiliza location.hash o location.search para construir la URL dinámica.
Lectura del término de búsqueda desde la URL:
- Al cargar la aplicación, verifica la URL para ver si hay un término de búsqueda presente.
- Si lo hay, filtra automáticamente los resultados basados en ese término.
Sincronización bidireccional:
- Asegúrate de que cualquier cambio en la barra de búsqueda se refleje en la URL.
- Al mismo tiempo, si la URL cambia externamente (como al pegar en otra pestaña), asegúrate de que la interfaz se actualice para mostrar los resultados correctos.

Conclusión final del reto

Este ejercicio no solo nos ayuda a pulir habilidades en React Router, sino que también nos invita a pensar en cómo hacer aplicaciones más accesibles y fáciles de usar. Recordemos, la clave está en experimentar y aprender del proceso. Si encuentras dificultades, no dudes en compartir tus intentos y descubrimientos, no importa si la solución no es perfecta al inicio. ¡Cada intento es un paso más hacia el dominio de la herramienta!

Bramucci Candela

student•

Este reto es muy fácil con useSearchParams!! Qué lástima que no lo descubrí antes

import React from 'react'
import { useSearchParams } from 'react-router-dom'

export function TodoSearch({ setSearchValue, loading }) {
    const [searchParams, setSearchParams] = useSearchParams()
    const paramsValue = searchParams.get('search')

    const onSearchValueChange = ({ target: { value } }) => {
        setSearchValue(value)
        setSearchParams({ search: value })
    }

    return (
        <input
            className={`TodoSearch ${loading && 'TodoSearch--loading'}`}
            onChange={onSearchValueChange}
            value={paramsValue ?? ''}
            placeholder="Search a To-Do"
        />
    )
}

Diego Portillo

student•

Impecable

Andres Prieto

student•

Acá te faltó un condicional para que te cargue la busqueda directamente cuando abres la URL con una busqueda, es solo un if:


&#x20; if (paramValue) {

&#x20;   setSearchValue(paramValue);

&#x20; }

Arturo Mauricio Terceros Beltrán

student•

Para resolver el reto se puede ulitlizar el hook useSearchParams

En el HomePage.jsx agregamos:

 const [params, setParams] = useSearchParams();

Y se lo enviamos a TodoSearch:

<TodoSearch
          searchValue={searchValue}
          setSearchValue={setSearchValue}
          params={params}
          setParams={setParams}
        />

Ya en TodoSearch.jsx lo manejamos de la siguiente manera:

import React, { useEffect } from "react";

function TodoSearch({ searchValue, setSearchValue, params, setParams }) {
  const onSearchValueChange = (event) => {
    setSearchValue(event.target.value);

    let params = {
      search: event.target.value,
    };
    setParams(params);
  };

  useEffect(() => {
    const search = params.get("search") ?? "";
    setSearchValue(search);
  }, [params]);

  return (
    <input
      className="todo-search"
      placeholder="Search..."
      type="text"
      value={searchValue}
      onChange={onSearchValueChange}
    />
  );
}

export { TodoSearch };

De esa manera logramos el siguiente resultado

Juan Castro

teacher•

:clap::clap::clap:

David Espino

student•

Uff, cuando te enfrentas a retos como este te es cuando realmente comprendes lo que creías entender de la clase. Logré de resolverlo de la siguiente manera:

Dentro de App.js modifiqué la propiedad path para que aceptara el valor searchValue, también dejé el valor anterior para que la Route de HomePage siguiera funcionando aunque no se enviara el valor searchValue:
En TodoSearch.js utilicé useParams para cachar el valor searchValue de la url y se lo envie como value al input
-Dentro de un useEffect() evalúo si params.searchValue existe, sí es así, actualizo el searchValue que recibimos desde props.
En la función onSearchValueChange agregue un navigate hacia el valor del input:
No sé si es la mejor solución, pero funciona :)

Diego Garcia

student•

Mi solucion consiste en:

Crear un ruta hija dinamica.

<Route path='/' element={<HomePage/>}>
    <Route path=':slug' element={<HomePage/>}/>
</Route>

Quedando asi App.js:

function App() {
  
  return (
    <HashRouter>
      <Routes>
        <Route path='/' element={<HomePage/>}>
          <Route path=':slug' element={<HomePage/>}/>
        </Route>
        <Route path='/new' element={<NewTodoPage/>}/>
        <Route path='/edit/:id' element={<EditTodoPage/>}/>
        <Route path='*' element={<p>No Found!</p>}/>
      </Routes>
    </HashRouter>
  );
}

export { App };

Con el ayuda de useNavigate, creo la ruta con cada ingreso de teclado y navego a ella.

const onSearchValueChange = (event) => {
    setSearchValue(event.target.value);
    navigate('?search=' + event.target.value);
};

Sí el usuario ingresa una url directa con su busqueda, me ayudo de una valorInput global y valido si hay una busqueda con ayuda de useLocation, espero a la carga del primer render y en 100ms realizo la busqueda.

let textSearchValue = searchValue;

if(location.search && !loading) {
    textSearchValue = location.search.replace('?search=', '');
    setTimeout(()=>setSearchValue(textSearchValue),50);
}

Quedando finalmente asi el archivo index.js de TodoSearch como sigue:

function TodoSearch({ searchValue, setSearchValue, loading }) {
  
  const navigate = useNavigate();
  const location = useLocation();
  let textSearchValue = searchValue;

  const onSearchValueChange = (event) => {
    setSearchValue(event.target.value);
    navigate('?search=' + event.target.value);
  };

  if(location.search && !loading) {
    textSearchValue = location.search.replace('?search=', '');
    setTimeout(()=>setSearchValue(textSearchValue),50);
  }

  return (
    <input
      className="TodoSearch"
      placeholder="Cebolla"
      value={textSearchValue}
      onChange={onSearchValueChange}
      disabled={loading}
    />
  );
}

export { TodoSearch };

Angel David Contreras Barrios

student•

A caray!!

Enrique Aguilera

student•

yo utilice el hook useSearchParams para poder modificar los query params en la url, y también useEffect con un array vacio en el segundo argumento para que solo en el primer render se asigne el valor del searchParams al input

José Eduardo Vinagre de Dios

student•

HomePage

import React from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { useTodos } from '../useTodos';
import { TodoHeader } from '../../ui/TodoHeader';
import { TodoCounter } from '../../ui/TodoCounter';
import { TodoSearch } from '../../ui/TodoSearch';
import { TodoList } from '../../ui/TodoList';
import { TodoItem } from '../../ui/TodoItem';
import { TodosError } from '../../ui/TodosError';
import { TodosLoading } from '../../ui/TodosLoading';
import { EmptyTodos } from '../../ui/EmptyTodos';
import { CreateTodoButton } from '../../ui/CreateTodoButton';
import { ChangeAlert } from '../../ui/ChangeAlert';

function HomePage() {
  const [searchParams] = useSearchParams();
  const searchText = searchParams.get('searchText');
  const { state, stateUpdaters } = useTodos();
  const navigate = useNavigate();

  const {
    error,
    loading,
    searchedTodos,
    totalTodos,
    completedTodos,
    // openModal,
    searchValue,
  } = state;

  const {
    // setOpenModal,
    // addTodo,
    completeTodo,
    deleteTodo,
    setSearchValue,
    sincronizeTodos,
  } = stateUpdaters;

  if(searchText && searchText !== searchValue){
    setSearchValue(searchText);
  }
  
  return (
    <React.Fragment>
      <TodoHeader loading={loading}>
        <TodoCounter
          totalTodos={totalTodos}
          completedTodos={completedTodos}
        />
        <TodoSearch
          searchValue={searchValue}
          setSearchValue={setSearchValue}
        />
      </TodoHeader>

      <TodoList
        error={error}
        loading={loading}
        totalTodos={totalTodos}
        searchedTodos={searchedTodos}
        searchText={searchValue}
        onError={() => <TodosError />}
        onLoading={() => <TodosLoading />}
        onEmptyTodos={() => <EmptyTodos />}
        onEmptySearchResults={
          (searchText) => <p>No hay resultados para {searchText}</p>
        }
      >
        {todo => (
          <TodoItem
            key={todo.id}
            text={todo.text}
            completed={todo.completed}
            onComplete={() => completeTodo(todo.id)}
            onEdit={()=> navigate('/edit/' + todo.id, {state: { todo }})}
            onDelete={() => deleteTodo(todo.id)}
          />
        )}
      </TodoList>
{/* 
      {!!openModal && (
        <Modal>
          <TodoForm
            addTodo={addTodo}
            setOpenModal={setOpenModal}
          />
        </Modal>
      )} */}

      <CreateTodoButton
        onClick = {()=> navigate('/new')}
        // setOpenModal={setOpenModal}
      />

      <ChangeAlert
        sincronize={sincronizeTodos}
      />
    </React.Fragment>
  );
}

export { HomePage };

TodoSearch

import React from 'react';
import './TodoSearch.css';
import { useNavigate } from 'react-router-dom';

function TodoSearch({ searchValue, setSearchValue, loading }) {
  const navigate = useNavigate();
  const onSearchValueChange = (event) => {
    setSearchValue(event.target.value);
    const params = new URLSearchParams({
      searchText: event.target.value,
    });
    navigate('/?'+params.toString());
  };

  return (
    <input
      className="TodoSearch"
      placeholder="Cebolla"
      value={searchValue}
      onChange={onSearchValueChange}
      disabled={loading}
    />
  );
}

export { TodoSearch };

Neil Ruiz

student•

La solución que construí está basada en la utilización del hook useSearchParams y para implementarla sólo ajusté el componente HomaPage.jsx, por considerar que esto genera ventajas a nivel de separación de responsabilidades, escalabilidad y flujo claro:

import { useEffect } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { useTodos } from '../useTodos';
import { TodoHeader } from '../../ui/TodoHeader';
import { TodoCounter } from '../../ui/TodoCounter';
import { TodoSearch } from '../../ui/TodoSearch';
import { TodoList } from '../../ui/TodoList';
import { TodoItem } from '../../ui/TodoItem';
import { TodosError } from '../../ui/TodosError';
import { TodosLoading } from '../../ui/TodosLoading';
import { EmptyTodos } from '../../ui/EmptyTodos';
import { CreateTodoButton } from '../../ui/CreateTodoButton';
import { ChangeAlert } from '../../ui/ChangeAlert';

function HomePage() {
  const navigate = useNavigate();
  const { state, stateUpdaters } = useTodos();
  const [searchParams, setSearchParams] = useSearchParams();
  const searchParam = searchParams.get('search') || '';

  const {
    error,
    loading,
    searchedTodos,
    totalTodos,
    completedTodos,
    searchValue,
  } = state;

  useEffect(() => {
    if (searchParam !== searchValue) {
      setSearchValue(searchParam);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [searchParam]);

  const updateSearchValue = (value) => {
    if (value) {
      setSearchParams({ search: value });
    } else {
      setSearchParams({});
    }
    setSearchValue(value);
  };


  const {
    completeTodo,
    deleteTodo,
    setSearchValue,
    sincronizeTodos,
  } = stateUpdaters;
  
  return (
    <>
      <TodoHeader loading={loading}>
        <TodoCounter
          totalTodos={totalTodos}
          completedTodos={completedTodos}
        />
        <TodoSearch
          searchValue={searchValue}
          setSearchValue={updateSearchValue}
        />
      </TodoHeader>

      <TodoList
        error={error}
        loading={loading}
        totalTodos={totalTodos}
        searchedTodos={searchedTodos}
        searchText={searchValue}
        onError={() => <TodosError />}
        onLoading={() => <TodosLoading />}
        onEmptyTodos={() => <EmptyTodos />}
        onEmptySearchResults={
          (searchText) => <p>No hay resultados para {searchText}</p>
        }
      >
        {todo => (
          <TodoItem
            key={todo.id}
            text={todo.text}
            completed={todo.completed}
            onEdit={()=>navigate('/edit/' + todo.id,{state:{todo}})}
            onComplete={() => completeTodo(todo.id)}
            onDelete={() => deleteTodo(todo.id)}
          />
        )}
      </TodoList>

      <CreateTodoButton
        onClick={()=>navigate('/new')}
      />

      <ChangeAlert
        sincronize={sincronizeTodos}
      />
    </>
  );
}

export {HomePage};

Donovan RM

student•

La hice de esta manera apoyandome de los compañeros:

import React from 'react';

import { useSearchParams } from 'react-router-dom';

import './TodoSearch.scss'

function TodoSearch({``loading``, ``searchValue``, ``setSearchValue``}) {

const [searchParams, setSearchParams] = useSearchParams();

const paramsValue = searchParams.get('search'); const updateSearchParams = (``value``) => { setSearchParams({ search: ``value`` }); }; if (paramsValue) { setSearchValue(paramsValue); }; return (

<section ``className``="cont-box"> <input

placeholder``="Busca tu tarea"

value``={paramsValue ?? ''} ``onChange``=

{(``event``) => { const value = ``event``.target.value; setSearchValue(value); updateSearchParams(value); }} ``disabled``={``loading``} />

...

</section>

</div> );} export { TodoSearch };

Max Andy Diaz Neyra

student•

Aquí mi solución al reto utilizando useSearchParams en typescript y vite:

import { FC, useEffect, Dispatch, SetStateAction, ChangeEvent } from "react";
import './TodoSearch.css';
import { useSearchParams } from "react-router-dom";

interface Props {
    loading?:boolean,
    searchValue: string,
    setSearchValue: Dispatch<SetStateAction<string>>
}

const TodoSearch:FC<Props> = ({
    loading,
    searchValue,
    setSearchValue
}) => {

    const [searchParams, setSearchParams] = useSearchParams();

    
    useEffect(()=>{
        const paramsValue = searchParams.get('search') || '';
        setSearchValue(paramsValue)
    }, [searchParams])

    const onChangeHandler = (event:ChangeEvent<HTMLInputElement>):void => {
        setSearchValue(event.target.value);
        setSearchParams({ search : event.target.value });
    }

    return (
       <input 
        type="text" 
        className="TodoSearch" 
        placeholder="Ingresar nombre de tarea buscada" 
        value={searchValue}
        onChange={onChangeHandler}
        disabled={loading}
    />
    )
}

export { TodoSearch }

Juan Mercado

student•

En este caso utilize el hook de react-router useSearchParams. No es la mejor solucion pero aca la tratare de explicar:

Componente TodoSearch:

 const [searchParams, setSearchParams] = useSearchParams({});
let handleSearchChange = (e) => {
        setInputValue(e.target.value)
        setSearchParams({search: e.target.value})
    }

Poniendo dentro del evento change del input setSerachParams nos indica que va a agregar a la ruta una query llamada search que asignara el valor del input

En este punto tambien podemos añadir un evento de tipo enter asi cuando el usuario haga enter el hook useNavigate nos lleve a la ruta asignada.

En el hook useTodos donde tenemos el estado para controlar el inputValue en las validaciones les añadi unos nuevos condicionales.... si... la solucion que se me vino es muy tediosa


    if(inputValue.length >= 1){
        arrayOfTodos = todos.filter(todo => todo.text.includes(inputValue))
    }else if(location.search === "?search="){
        console.log('nada que vuscar')
        navigate('/')
    }
    else if(location.search){
        let queryIndex = location.search.indexOf('=') + 1 
        let query = location.search.slice(queryIndex)
        
        setInputValue(query.split('%').map(text => {
            let indexText = text.indexOf('0') + 1
            let newText = text.slice(indexText)
            return newText
        }).join(' '))    
    }else{
        arrayOfTodos = todos
    }

if: Alista en un nuevo array todas las todos que coincidan con lo que el usuario escriba en el input o quiera buscar.
Si el usuario no nos manda nada entonces nos direcciona al home.
Si el location.search existe o si el usuario esta buscando algo: implemente que formatee la query: en resumen ej: location.search = '/?search=ir%20con%20juandc' Lo que esta dentro de este if formatea ese string largo en solamente lo que escriba el usurio en el input y setea el valor del input a lo que nos llega como query
por ultimo el else: nos dice que si no encontro ninguna todo con lo que busca, entonces las todos es a las todos por defecto

Brianda Raquel Campoy Esquer

student•

No quize aplicar eso en el TodoMachine pero lo implemente aqui https://briandacampoy.github.io/poke-api/#/

Joel Suarez

student•

Para resolver el reto tuve que hacer:

Crear un effect para que escuhe cambios en searchValue y navegar al mismo location con un param search

  let location = useLocation();
  let navigate = useNavigate();

  React.useEffect(() => {
    if (searchValue.length > 0) {
      navigate({
        pathname: location.pathname,
        search: `?search=${searchValue}`,
      })
    }
  }, [searchValue])

utilizo el hook useSearchParams de react-router-dom para traer ese valor cuando cambie la ruta

let [searchParams, setSearchParams] = useSearchParams();

const wordFromPath = searchParams.getAll('search')[0];

verifico que el parametro search traiga algun valor y si esa asi hago la busqueda por ese valor y actualizo el valor de searchValue

if (!searchValue.length >= 1) { 

    if(wordFromPath) {
      searchedTodos = todos.filter(todo => {
        const todoText = todo.text.toLowerCase();
        const searchText = wordFromPath.toLowerCase();
        return todoText.includes(searchText);
      });
      setSearchValue(wordFromPath)
    }
    else {
      searchedTodos = todos;
    }

  }

la verdad no se si sea la opcion mas optima ya que por cada cambio de searchValue estoy navegando a la misma pagina, quisiera saber cual seria una mejor opcion

Jhunior Eduardo Guevara Lázaro

student•

Para que no navegue por cada valor tipeado en el input, agregué una funcion(handleKeyDown) al componente TodoSearch para que solo navegara hacia la ruta de busqueda cuando se apriete la tecla "enter".

 const handleKeyDown = (event) => {
    if (event.key === "Enter") {
      // 👇 Get input value
      navigate(`/?search=${event.target.value}`);
    }
  };

// el input en el TodoSearch es:
<input
      disabled={loading}
      // autoFocus
      className="TodoSearch"
      placeholder="cargando ..."
      onChange={onSearchValueChange}
      value={searchValue}
      onKeyDown={handleKeyDown}
    />

// fijarse el nuevo metodo onKeyDown que llama a la funcion handleKeyDown

Jairo Felipe Nieto Ruiz

student•

https://nieto35.github.io/personal-page/#/api

Reto completado con Api de git Hub

Juan Castro

teacher•

YEEEEEESSSS ¡Muy bien hecho, Jairo! :clap:

Edward Junior Ramos VIllarreal

student•

Se utilizaría la propiedad search del hook useLocation para capturar la query que se le pasa a la url. Teniendo eso se hace el filtrado y se muestra el valor en el input. Y para el otro caso, se utilizaría el useNavigate al hacer submit.

Diana Florez

student•

Me suena q es con useLocation 🤔

Platzi Team

student•

Se puede hacer usando el hook useSearchParams escribi una implementación un poco diferente usando 2 UseEffect un para searchParams y otro para searchValue, para que permita actualizar en ambas direcciones ya sea se escriba en la URL o en el campo de busqueda, adicionalmente que el que escuche searchParams, tambien escuche loading.

function TodoSearch({ searchValue, setSearchValue, loading }) {
  const [searchParams, setSearchParams] = useSearchParams();

  React.useEffect(() => {
    const searchText = searchParams.get("search") || null;
    if (searchText && searchText !== searchValue) {
      setSearchValue(searchText);
    }
  }, [loading, searchParams]);

  React.useEffect(() => {
    const searchText = searchParams.get("search") || null;
    if (searchText !== searchValue) {
      setSearchParams({ search: searchValue });
    }
  }, [searchValue]);

  return (
    <input
      placeholder="Search..."
      className="TodoSearch"
      value={searchValue}
      disabled={loading}
      onChange={(event) => {
        setSearchValue(event.target.value);
      }}
    />
  );
}

Matias SANCHEZ

student•

alguien pudo realizarlo porque me rompi la cabeza pensando y no encontré una ?

David Espino

student•

Te comparto mi solución compañero :) Dentro de App.js modifiqué la propiedad path para que aceptara el valor searchValue, también dejé el valor anterior para que la Route de HomePage siguiera funcionando aunque no se enviara el valor searchValue:

En TodoSearch.js utilicé useParams para cachar el valor searchValue de la url y se lo envie como value al input

-Dentro de un useEffect() evalúo si params.searchValue existe, sí es así, actualizo el searchValue que recibimos desde props.

En la función onSearchValueChange agregue un navigate hacia el valor del input:

No sé si es la mejor solución, pero funciona 😃

Daniel Rebollar

student•

presento mi código en homepage```js function HomePage() { // const [count, setCount] = useState(0) const navigate = useNavigate(); const { states, updaters } = useTodos();

const params = useParams() // const id = Number(params.search)

// const location = useLocation(); // if(location.state?.searchtodo) // navigate(location.pathname) const { error, loading, searchedTodos, // openModal, totalTodos, sincronizeTodos, searchValue, completedTodos, urlSearch,

} = states

const { completeTodo, deleteTodo, // setOpenModal, setSearchValue, addTodo, setUrlSearch, } = updaters // console.log(searchedTodos.length===0,!!params.searchedTodo) // console.log(params.searchedTodo)

if(loading && !urlSearch){ console.log("aqui",loading,urlSearch) return <p>Cargando...</p> } else if( params.searchedTodo && !urlSearch){ console.log("aqui2",loading,urlSearch) setSearchValue(params.searchedTodo) console.log(searchedTodos) console.log(typeof params.searchedTodo) setUrlSearch(true) }

const searchValueURL = params.searchedTodo || searchValue


```js
function TodoSearch({ searchValue, setSearchValue, loading }) {
  const [valueForm, setValueForm] = React.useState(searchValue || '');
  const navigate = useNavigate()
  const onSearchValueChange = (event) => {
    event.preventDefault();
    // console.log(event.target.value);
    setValueForm(event.target.value)
    if(event.target.value === ''){
      setSearchValue('')
      navigate(`/`)

    }
  };
 
  const onSubmit = (event) => {
    event.preventDefault();
    
    if(valueForm!==''){
      setSearchValue(valueForm)
      navigate(`/search/${valueForm}`)

    }
    // setSearchValue(event.target.value);
  };

  return (
    <>
    <form onSubmit={onSubmit} className="container">
      <input
        className="TodoSearch"
        placeholder="Cebollas"
        value={valueForm}
        onChange={(e)=>onSearchValueChange(e)}
        disabled={loading}
      />
      <button type="submit">Buscar</button>

    </form>
    
    </>
  );
}

export { TodoSearch };

JONATHAN SANCHEZ TRUJILLO

student•

mi implementación en app.js

<Route path='/:searchValue' element={<HomePage />} />

en HomePage.js

const { searchValue: searchParam } = useParams(); useEffect(() => {

if(searchParam) { setsearchValue(searchParam);

} }, [searchParam, setsearchValue]);

y en TodoSearch.js

const navigate = useNavigate(); const location = useLocation(); const handleSearchChange = (event) => { const newSearchvalue = event.target.value; setsearchValue(newSearchvalue); const newHash = newSearchvalue ? `/${newSearchvalue}` : '/'; if(window.location.hash !== newHash) { navigate(newHash, { replace: true }) } } useEffect(() => { const searchParam = location.hash.replace('#/', ''); setsearchValue(searchParam) }, [location, setsearchValue]);