Aquí hay un ejemplo de escenario:
tengo dos componentes y
Los parámetros de búsqueda se ven así: ?A=123&B=456
La Ruta es así path="/home"
Quiero que A se cargue en la ruta si solo A está presente en los parámetros de búsqueda (por ejemplo, ?A=123), quiero que B se cargue si hay B en los parámetros de búsqueda (B también se carga si tanto A como B están en el parámetros de búsqueda).
¿Puedo hacer algo dentro del componente Ruta donde pueda tener un renderizado condicional basado en eso y cómo lo haría?
alias:
<Route path="/home" if(urlparam.B){ render={<B/>} } else { render={<A/>} } </Route>¿Cómo puedo pasar la url a la ruta para que pueda verificar?
No puede hacer esto en el componente Route , pero puede crear un componente contenedor para manejar esto.
Puede acceder a la cadena de search del objeto de location actual. Desde aquí puede crear un objeto URLSearchParams y acceder a los parámetros queryString y aplicar la lógica de representación condicional.
Las ubicaciones representan dónde se encuentra la aplicación ahora, dónde desea que vaya o incluso dónde estaba. Se parece a esto:
{ key: 'ac3df4', // not with HashHistory! pathname: '/somewhere', search: '?some=search-string', hash: '#howdy', state: { [userDefined]: true } }Código
const Wrapper = ({ location }) => { const { search } = location; const searchParams = new URLSearchParams(search); const hasAParam = searchParams.get("A"); const hasBParam = searchParams.get("B"); if (hasAParam && !hasBParam) { // only A and not B return <A />; } else if (hasBParam) { // only B return <B />; } return null; // render nothing };...
<Route path="/home" component={Wrapper} /> Esto supone que está utilizando react-router-dom@5 .
Si usa v6, use el gancho useSearchParams directamente.
Ejemplo:
const Wrapper = () => { const [searchParams] = useSearchParams(); const hasAParam = searchParams.get("A"); const hasBParam = searchParams.get("B"); if (hasAParam && !hasBParam) { // only A and not B return <A />; } else if (hasBParam) { // only B return <B />; } return null; // render nothing };...
<Route path="/home" element={<Wrapper />} />prueba esto:
<Route path="/home" render={urlparam?.B ? <B/> : <A/>} ></Route>En este caso puedes usar el operador ternario para resolver tu problema