score:2

Accepted answer

the querystring part of a url isn't considered when using the path part of a url to match and render routes. the route should specify only the path that it needs to match, and the routed component then needs to read the querystring parameters it needs.

example:

<route path="/callback" element={<component />} />

the dynamic part is in how you link/navigate to the "/callback" route.

  • using a link component

     <link
       to={{
         pathname: "/callback",
         search: `?code=${code}`, // inject code value into template
       }}
     >
       code
     </link>
    
  • using the navigate component

     <navigate
       to={{
         pathname: "/callback",
         search: `?code=${code}`, // inject code value into template
       }}
     />
    
  • using navigate function

     navigate({
       pathname: "/callback",
       search: `?code=${code}`, // inject code value into template
     });
    

the component should use the usesearchparams hooks to access the querystring parameters.

for url "/callback?code=1234"

const component = () => {
  const [searchparams] = usesearchparams();
  const code = searchparams.get("code"); // "1234"

  ...
}

score:0

you need to use link dynamically.

<browserrouter>
  /* links */
  {listofcodes.map(x=> (<link to={'callback/' + x.code} />)}

  /* component */
  <route path="callback/:code" component={callback} />
</browserrouter>

class callbackextends component {
  render() {
    return (
      <div>
        {this.props.match.params.code}
      </div>
    );
  }
}

score:0

you can use navigate

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

let navigate = usenavigate();

 navigate({
  pathname: '/callback',
  search: `?code=${data}`,
});

then use uselocation to get the code from url.

const search = uselocation().search;
const id = new urlsearchparams(search).get("code");

helpful link


Related Query

More Query from same tag