Here's a scenario example:
I have two components and
The search params look like this: ?A=123&B=456
The Route is like this path="/home"
I want A to load on the route if only A is present in the search params (e.g. ?A=123), I want B to load if there is B in the search params (B also loads if both A and B are in the search params).
Can I do something inside the Route component where I can have a conditional render based on that and how would I go about doing that?
AKA:
<Route
path="/home"
if(urlparam.B){
render={<B/>}
} else {
render={<A/>}
}
</Route>
how can I pass the url to the route so it can check?
You can't do this in the Route component, but you can create a wrapper component to handle this.
You can access the current location object's search string. From here you can create a URLSearchParams object and access the queryString parameters and apply the conditional rendering logic.
Locations represent where the app is now, where you want it to go, or even where it was. It looks like this:
{
key: 'ac3df4', // not with HashHistory!
pathname: '/somewhere',
search: '?some=search-string',
hash: '#howdy',
state: {
[userDefined]: true
}
}
Code
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} />
This assumes you are using react-router-dom@5.
If using v6, then use the useSearchParams hook directly.
Example:
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 />} />
try this:
<Route
path="/home"
render={urlparam?.B ? <B/> : <A/>}
></Route>
In this case you can use the ternary operator to solve your problem