Getting query parameters from react-router hash fragment

Christopher Robin picture Christopher Robin · Apr 24, 2015 · Viewed 164.5k times · Source

I'm using react and react-router for my application on the client side. I can't seem to figure out how to get the following query parameters from a url like:

http://xmen.database/search#/?status=APPROVED&page=1&limit=20

My routes look like this (the path is totally wrong I know):

var routes = (
<Route>
    <DefaultRoute handler={SearchDisplay}/>
    <Route name="search" path="?status=:status&page=:page&limit=:limit" handler={SearchDisplay}/>
    <Route name="xmen" path="candidate/:accountId" handler={XmenDisplay}/>
</Route>
);

My route is working fine but I'm just not sure how to format the path to get the parameters I want. Appreciate any help on this!

Answer

Duncan Finney picture Duncan Finney · Apr 25, 2015

Note: Copy / Pasted from comment. Be sure to like the original post!

Writing in es6 and using react 0.14.6 / react-router 2.0.0-rc5. I use this command to lookup the query params in my components:

this.props.location.query

It creates a hash of all available query params in the url.

Update:

For React-Router v4, see this answer. Basically, use this.props.location.search to get the query string and parse with the query-string package or URLSearchParams:

const params = new URLSearchParams(paramsString); 
const tags = params.get('tags');