Necesito que el enrutador redireccione a la página "/"
cuando la URL no tiene ningún parámetro queryString ( "/domain/search"
). Pero si tiene alguno, por ejemplo "/domain/search?keyword=something&page=1"
, debería continuar y mostrar el componente Movies
.
Mi código a continuación no funciona, todavía se redirige a "/"
incluso si la URL tiene algunos parámetros queryString.
Por favor ayuda con este problema.
<Routes> <Route path="/" element={<Layout />}> <Route index element={<Search />} /> <Route path="search" element={<Navigate to="/" />} /> <Route path="search/*" element={<Movies />} /> </Route> </Routes>
Debe usar useSearchParams
en el componente Movies
para leer la cadena de consulta en la URL:
<Routes> <Route path="/" element={<Layout />}> <Route index element={<Search />} /> <Route path="search" element={<Movies />} /> </Route> </Routes>
Movies
: import { Navigate, useSearchParams } from "react-router-dom"; function Movies(props) { const [searchParams, setSearchParams] = useSearchParams(); const page = searchParams.get("page"); const otherParam = searchParams.get("otherParam"); if(!page && !otherParam) { return <Navigate to="/" replace /> } // the rest of your component ... }
O usando URLSearchParams.keys()
import { Navigate, useSearchParams } from "react-router-dom"; function Movies() { const [searchParams, setSearchParams] = useSearchParams(); if (![...searchParams.keys()].length) { return <Navigate to="/" replace />; } return <span>Movies page</span>; }
react-router-dom
y el componente Route
no usa ni hace referencia a la URL queryString al hacer coincidir las rutas. Esto es algo que el componente enrutado debe verificar o algo que puede crear un componente de ruta de diseño especial para manejar. El código debe usar el gancho useSearchParams
para acceder a los parámetros de searchParams
y verificar la existencia de cualquier parámetro.
Ejemplo:
Este ejemplo es una ruta de diseño que verifica la longitud de la matriz de entradas de los parámetros de búsqueda y, si hay entradas, se representa un componente de Outlet
para cualquier componente de Route
anidado para representar su element
, de lo contrario, se representa una redirección de regreso a "/"
.
import { Navigate, Outlet, useSearchParams } from 'react-router-dom'; const ParamsRoute = () => { const [searchParams] = useSearchParams(); return searchParams.entries().length ? <Outlet /> : <Navigate to="/" replace /> };
Uso:
<Routes> <Route path="/" element={<Layout />}> <Route index element={<Search />} /> <Route element={<ParamsRoute />}> <Route path="search" element={<Movies />} /> </Route> </Route> </Routes>
Tal vez desee que estén presentes parámetros específicos de queryString:
import { Navigate, Outlet, useSearchParams } from 'react-router-dom'; const ParamsRoute = ({ params = [] }) => { const [searchParams] = useSearchParams(); return searchParams.entries().length // has params && params.every(param => searchParams.get(param)) // has required params ? <Outlet /> : <Navigate to="/" replace /> };