Getting query parameters from react-router hash fragment

Question

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!

Solution 1

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');

Solution 2

The above answers won't work in react-router v4. Here's what I did to solve the problem -

First Install query-string which will be required for parsing.

npm install -save query-string

Now in the routed component you can access the un-parsed query string like this

this.props.location.search

You can cross check it by logging in the console.

Finally parse to access the query parameters

const queryString = require('query-string');
var parsed = queryString.parse(this.props.location.search);
console.log(parsed.param); // replace param with your own 

So if query is like ?hello=world

console.log(parsed.hello) will log world

Solution 3

OLD (pre v4):

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 (React Router v4+):

this.props.location.query in React Router 4 has been removed (currently using v4.1.1) more about the issue here: https://github.com/ReactTraining/react-router/issues/4410

Looks like they want you to use your own method to parse the query params, currently using this library to fill the gap: https://github.com/sindresorhus/query-string

Solution 4

update 2017.12.25

"react-router-dom": "^4.2.2"

url like

BrowserHistory: http://localhost:3000/demo-7/detail/2?sort=name

HashHistory: http://localhost:3000/demo-7/#/detail/2?sort=name

with query-string dependency:

this.id = props.match.params.id;
this.searchObj = queryString.parse(props.location.search);
this.from = props.location.state.from;

console.log(this.id, this.searchObj, this.from);

results:

2 {sort: "name"} home

---

"react-router": "^2.4.1"

Url like http://localhost:8080/react-router01/1?name=novaline&age=26

const queryParams = this.props.location.query;

queryParams is a object contains the query params: {name: novaline, age: 26}

Solution 5

"react-router-dom": "^5.0.0",

you do not need to add any additional module, just in your component that has a url address like this:

http://localhost:3000/#/?authority'

you can try the following simple code:

    const search =this.props.location.search;
    const params = new URLSearchParams(search);
    const authority = params.get('authority'); //

View more solutions

Comments

[Peter Aron Zentai]

It is no more the way as of React-router 1.x then 2.x ////

[btown]

Per Peter, this example is out of date: see stackoverflow.com/a/35005474/298073

[Thomas Modeneis]

I've tested with React 0.14.8 and your answer does not work rendering: error: TypeError: Cannot read property 'location' of undefined :|

[Marrs]

Hey @ThomasModeneis, is this the topmost parent component that your router is rendering? or is it a child component? If i remember correctly you have to pass this.props.location.query into your child components from the parent component that the router rendered, only thing i can think of off the top of my head.

[mc9]

query seems to be gone in React Router 4. github.com/ReactTraining/react-router/issues/…

[Ninh Pham]

Or without lib: const query = new URLSearchParams(props.location.search); console.log(query.get('hello')); (need polyfill for older browsers).

[codeVerine]

If you have something like this : http://localhost:8090/#access_token=PGqsashgJdrZoU6hV8mWAzwl‌​XkJZO8ImDcn&expires_‌​in=7200&token_type=b‌​earer (ie no / after #) Then for react router v4 you should use location.hash instead of location.search

[Admin]

This should work when I build the application, right?