Pass dynamic url to React Router

Question

I use react-router-dom version ^5.1.2 and try to pass dynamic property. My root component looks like this:

export const RegisterRoutes: React.FunctionComponent<RouteComponentProps> = ({
  match,
}: RouteComponentProps) => {
  const root = match.url;

  return (
    <Switch>
      <Route exact path={`${root}/success`} component={RegisterSuccess} />
      <Route exact path={`${root}/success/email`} component={RegisterEmail} />
      <Route exact path={`${root}/confirmation/email/:code`} component={RegisterEmailConfirmation} />
      <Redirect to={root} />
    </Switch>
  );
};

Here is a child RegisterEmailConfirmation component:

export const RegisterEmailConfirmation: React.FunctionComponent<RouteComponentProps> = ({ match }) => {

  console.log(match.params.code) // expected 'code' property from the url 

  return (
     <SomeContent />
    />
  );

I have an url from the BE with dynamic 'code' parameter, it looks like this: register/confirmation/email?code=fjds@dfF. How can I render RegisterEmailConfirmation component and read 'code' property inside? What's wrong with my code?

norbitrial · Accepted Answer · 2020-06-29 15:09:56Z

3

As you are using function component you could use useParams hook in your component. See from useParams documentation:

useParams returns an object of key/value pairs of URL parameters. Use it to access match.params of the current <Route>.

Try as:

export const RegisterEmailConfirmation: React.FunctionComponent<RouteComponentProps> = () => {
  let { code } = useParams();

  console.log(code);

  return <>
     { /* your implementation */ }
  </>
}

Also you can import as:

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

I hope this helps!

answered Jun 29, 2020 at 15:09

norbitrial

15.2k10 gold badges39 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

s_kamianiok Over a year ago

seems, it does not recognize path 'localhost:3000/register/confirmation/email?code=fjds@dfF' and nothing renders

norbitrial Over a year ago

@s_kamianiok What happens if you use the URL as register/confirmation/email/fjds@dfF?

s_kamianiok Over a year ago

sorry, looks everything is okay. my mistake - I used email?code=fjds@dfF' instead of email/my-dynamic-code

norbitrial Over a year ago

@s_kamianiok Awesome, happy to help!

Collectives™ on Stack Overflow

Pass dynamic url to React Router

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related