0
252
VistasRedireccionamiento de React Router v6 cuando no hay ningún parámetro de cadena de consulta de URL
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>2 Respuestas
Responde la pregunta0
Debe usar useSearchParams en el componente Movies para leer la cadena de consulta en la URL:
- Las Rutas:
<Routes> <Route path="/" element={<Layout />}> <Route index element={<Search />} /> <Route path="search" element={<Movies />} /> </Route> </Routes>- el componente
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>; }
0
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 /> };