CODEWITHSUNDEEP
javascriptreactjsreact-router
handsome
handsome

Reputation: 2402

How to parse a query string in React Router

Hello I´m using react router and I need to pass some querystring parameters

tried with

<Route path="/result/:type?/?filter=:filter?" exact strict component={Result}/>

I was expecting that to catch urls like

/result
/result/animals
/result/cars
/result/animals?filter=cats,dogs
/result/cars?filter=sedan,truck

what´s the right way to do it?

Upvotes: 15

Views: 31541

Answers (4)

NordinZ
NordinZ

Reputation: 74

With react router 6.20 you can use useSearchParams, docs here.

I used it like this, in my case I'm looking for the value of t in my code my query string is like this www.mysite.com?t=some_value:

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

const YourComponent = () => {

   const [searchParams, setSearchParams] = useSearchParams();
   console.log(searchParams.get("t"));
   // logs some_value...

   return (/* Your stuff... */)
}

Upvotes: 0

Harish Soni
Harish Soni

Reputation: 1896

You need to use the library you don't need to add the query string in the Route:

Here is an example:

import React from "react";
import qs from "query-string";

const Home = (props) => {
  console.log(props.location.search);
  const query = qs.parse(props.location.search, {
    ignoreQueryPrefix: true
  });
  console.log(query);
  return (
    <div>
      <h1>Welcome to the Tornadoes Website!</h1>
    </div>
  );
};

export default Home;

Edit @ CodeSandbox

Upvotes: 2

Peter
Peter

Reputation: 2927

Older versions of React Router offered this functionality but ultimately they decided it was too cumbersome to handle the variation across browsers.

As of the current version (v4), you need to use a library, such as query-string.

One more option to consider: if you know your target browsers support the URLSearchParams API, you can use that instead.

Install package:

yarn add query-string

Usage:

import queryString from 'query-string'

...

componentDidMount() {
  const values = queryString.parse(this.props.location.search)
}

Upvotes: 3

Moe
Moe

Reputation: 3713

For url parameters, like /animals and /cars, you can use the colon syntax /:type

But for query parameters, like ?filter=something, you need to parse the query string.

According to react-router docs:

React Router does not have any opinions about how your parse URL query strings. Some applications use simple key=value query strings, but others embed arrays and objects in the query string. So it's up to you to parse the search string yourself.

In modern browsers that support the URL API , you can instantiate a URLSearchParams object from location.search and use that.

In browsers that do not support the URL API (read: IE) you can use a 3rd party library such as query-string.

For example, in your component you will have location as a prop from the parent Route (or you can get it from withRouter), you can then use location.search to parse the query string like this:

function Parent({location}) {
  let params = new URLSearchParams(location.search);

  return <Child name={params.get("filter")} />;
}

For more info:

Upvotes: 12

Related Questions