I am working with react router. Initially I had two different components being rendered under the same route one with a parameter and one without(this is how the routes were differentiated). Now I am trying to add optional parameters to the first route while not editing the second one route. The issue is there is no way to tell the difference between the first route and the second.
My solution For this was to wrap the routes in a conditional statement and the condition works for the first route but I cant get to the 2nd because the test that determines the conditional statement is only run on the first rendering of the route? So my question is how do I properly wrap a react-routes in a conditional statement? This is what my routes look like:
{ !locationTest() ?
<>
<Route
exact={true}
path="/encounter-monitor/:queryData?"
component={EncounterMonitor}
/>
</>
:
<>
<Route
exact={true}
path="/encounter-monitor/:encounterID"
component={EncounterMonitorDetails}
/>
</>
}
And the test:
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
}
I cant seem to get the second route to work this way.
The first component will have a route that contains either a / or /? and the second route will always contain /encounters- .
You're approaching this wrong. React router serves to make your app a single page application by conditionally rendering components based on the url location. But you're tying to append the data to the url as if it were a language such as php. Maybe your solution lies in just making seperate components that handle this data and just passing the data to them with two static routes? Or even have one route and one component but conditionally render data within it (although I'd advise for keeping them in seperate components to make your project cleaner)
In most scenarios you don't want to be rendering 2 different components under the same route. To pass optional data to component you would normally use the search params.
This means you should no longer pass an optional path for the EncounterMonitor, but move this to the search params. An example path would be:
/encounter-monitor?query=foo+bar
This allows you to easily differentiate from:
/encounter-monitor/1
To support the above you should update your routes to:
<>
<Route
exact={true}
path="/encounter-monitor"
component={EncounterMonitor}
/>
<Route
exact={true}
path="/encounter-monitor/:encounterID"
component={EncounterMonitorDetails}
/>
</>
Then update your EncounterMonitorDetails to use useSearchParams:
const [searchParams, setSearchParams] = useSearchParams();
And handle the (optional) search params you want to support.
if (searchParams.has("query")) {
const query = searchParams.get("query");
// do stuff...
}
When linking to a page you can pass the search params as part of the link:
<Link to="/encounter-monitor?query=foo+bar">
foo bar encounter monitors
</Link>