snippetreactCritical
How to get parameter value from query string?
Viewed 0 times
getstringfromparametervaluequeryhow
Problem
How can I define a route in my routes.jsx file to capture the
I tried with the following routes configuration, but the
__firebase_request_key parameter value from a URL generated by Twitter's single sign on process after the redirect from their servers?http://localhost:8000/#/signin?_k=v9ifuf&__firebase_request_key=blablablaI tried with the following routes configuration, but the
:redirectParam is not catching the mentioned param:
Solution
React Router v6, using hooks
In react-router-dom v6 there's a new hook named useSearchParams. So with
you will get
React Router v4/v5, without hooks, generic
React Router v4 does not parse the query for you any more, but you can only access it via
E.g. with qs library imported as
Another library would be query-string. See this answer for some more ideas on parsing the search string. If you do not need IE-compatibility you can also use
For functional components you would replace
If your (non-functional) component is not a direct child of a
React Router v3
React Router already parses the location for you and passes it to your RouteComponent as props. You can access the query (after ? in the url) part via
If you are looking for the path parameter values, separated with a colon (:) inside the router, these are accessible via
This applies to late React Router v3 versions (not sure which). Older router versions were reported to use
General
nizam.sp's suggestion to do
will be helpful in any case.
In react-router-dom v6 there's a new hook named useSearchParams. So with
const [searchParams, setSearchParams] = useSearchParams();
searchParams.get("__firebase_request_key")you will get
"blablabla". Note, that searchParams is an instance of URLSearchParams, which also implements an iterator, e.g. for using Object.fromEntries etc.React Router v4/v5, without hooks, generic
React Router v4 does not parse the query for you any more, but you can only access it via
this.props.location.search (or useLocation, see below). For reasons see nbeuchat's answer.E.g. with qs library imported as
qs you could doqs.parse(this.props.location.search, { ignoreQueryPrefix: true }).__firebase_request_keyAnother library would be query-string. See this answer for some more ideas on parsing the search string. If you do not need IE-compatibility you can also use
new URLSearchParams(this.props.location.search).get("__firebase_request_key")For functional components you would replace
this.props.location with the hook useLocation. Note, you could use window.location.search, but this won't allow to trigger React rendering on changes.If your (non-functional) component is not a direct child of a
Switch you need to use withRouter to access any of the router provided props.React Router v3
React Router already parses the location for you and passes it to your RouteComponent as props. You can access the query (after ? in the url) part via
this.props.location.query.__firebase_request_keyIf you are looking for the path parameter values, separated with a colon (:) inside the router, these are accessible via
this.props.match.params.redirectParamThis applies to late React Router v3 versions (not sure which). Older router versions were reported to use
this.props.params.redirectParam.General
nizam.sp's suggestion to do
console.log(this.props)will be helpful in any case.
Code Snippets
const [searchParams, setSearchParams] = useSearchParams();
searchParams.get("__firebase_request_key")qs.parse(this.props.location.search, { ignoreQueryPrefix: true }).__firebase_request_keynew URLSearchParams(this.props.location.search).get("__firebase_request_key")this.props.location.query.__firebase_request_keythis.props.match.params.redirectParamContext
Stack Overflow Q#35352638, score: 1042
Revisions (0)
No revisions yet.