Estoy trabajando con el enrutador de reacción. Inicialmente, tenía dos componentes diferentes representados bajo la misma ruta, uno con un parámetro y otro sin (así es como se diferenciaron las rutas). Ahora estoy tratando de agregar parámetros opcionales a la primera ruta sin editar la segunda ruta. El problema es que no hay forma de saber la diferencia entre la primera ruta y la segunda.
Mi solución para esto fue envolver las rutas en una declaración condicional y la condición funciona para la primera ruta, pero no puedo llegar a la segunda porque la prueba que determina la declaración condicional solo se ejecuta en la primera representación de la ruta. Entonces, mi pregunta es ¿cómo envuelvo correctamente una ruta de reacción en una declaración condicional? Así es como se ven mis rutas:
{ !locationTest() ? <> <Route exact={true} path="/encounter-monitor/:queryData?" component={EncounterMonitor} /> </> : <> <Route exact={true} path="/encounter-monitor/:encounterID" component={EncounterMonitorDetails} /> </> }Y la prueba:
const locationTest = () => { let regex = new RegExp('/?'); let regex2 = new RegExp('/encounters-'); let theURL = window.location.href; let test = !regex.test(theURL) && regex2.test(theURL); return test }Parece que no puedo hacer que la segunda ruta funcione de esta manera.
El primer componente tendrá una ruta que contiene / o /? y la segunda ruta siempre contendrá /encounters- .
Te estás acercando a esto mal. El enrutador React sirve para hacer que su aplicación sea una aplicación de una sola página mediante la representación condicional de componentes en función de la ubicación de la URL. Pero está tratando de agregar los datos a la URL como si fuera un lenguaje como php. ¿Quizás su solución radica en simplemente hacer componentes separados que manejen estos datos y simplemente pasarles los datos con dos rutas estáticas? O incluso tener una ruta y un componente pero renderizar condicionalmente los datos dentro de él (aunque recomendaría mantenerlos en componentes separados para que su proyecto sea más limpio)
En la mayoría de los escenarios, no desea renderizar 2 componentes diferentes en la misma ruta. Para pasar datos opcionales al componente, normalmente usaría los parámetros de búsqueda.
Esto significa que ya no debe pasar una ruta opcional para EncounterMonitor , sino mover esto a los parámetros de búsqueda. Una ruta de ejemplo sería:
/encounter-monitor?query=foo+barEsto le permite diferenciarse fácilmente de:
/encounter-monitor/1Para respaldar lo anterior, debe actualizar sus rutas a:
<> <Route exact={true} path="/encounter-monitor" component={EncounterMonitor} /> <Route exact={true} path="/encounter-monitor/:encounterID" component={EncounterMonitorDetails} /> </> Luego actualice su EncounterMonitorDetails para usar useSearchParams :
const [searchParams, setSearchParams] = useSearchParams();Y maneje los parámetros de búsqueda (opcionales) que desea admitir.
if (searchParams.has("query")) { const query = searchParams.get("query"); // do stuff... }Al enlazar a una página, puede pasar los parámetros de búsqueda como parte del enlace:
<Link to="/encounter-monitor?query=foo+bar"> foo bar encounter monitors </Link>