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?

CodePudding user response：

try this:

<Route
path="/home"
render={urlparam?.B ? <B/> : <A/>}
></Route>

In this case you can use the ternary operator to solve your problem

CodePudding user response：

You can do it this way.

<Route
path="/home"
element={<RenderComponent />}
</Route>

Inside RenderComponent.js

import { useSearchParams } from "react-router-dom";


const RenderComponent=()=>{
let [searchParams, setSearchParams] = useSearchParams();
const [loading,setLoading]=useState(true);
const [comp,setComp]=useState("")

useEffect(()=>{
const A=searchParams.get("A")
const B=searchParams.get("B")

 if (A !== null) {
      setComp("A");
    } else {
      setComp("B");
    }

    setLoading(false);
},[])

 return <>{!loading && (comp === "A" ? <A /> : comp === "B" && <B />)}</>;

}

CodePudding user response：

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.

• location

  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
     }
   }
  

• URLSearchParams

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.

useSearchParams

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 />} />