reactjs - Redirect passing url parameters to state

Question

Using: "react-router-dom": "^5.1.2"

I am navigating to an url:

http://localhost:3000/#id_token=123&expires_in=3600&token_type=Bearer

I have a Redirect component ready to catch that and redirect me to dashboard:

<Redirect exact from="/" to="/dashboard" />

I know that we can redirect and pass state to props (from react-router docs) like this:

<Redirect
  to={{
    pathname: "/dashboard",
    search: "?utm=your+face",
    state: { referrer: currentLocation }
  }}
/>

However, I am not sure how to pass parameters from url to state (id_token, expires_in, etc.)

What is the solution to do so?

Answer 1

You can abstract the URL parameters before the redirect and them pass them in the Redirect route state

window.location.hash will give you the informtaion in your url - more here. You can create a util function to parse your hash and return to you the keys and values. You can then pass that in the Redirect

<Redirect
  to={{
    pathname: "/dashboard",
    search: "?utm=your+face",
    state: { id_token, expires_in, token_type  }
  }}
/>