Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Querystring in react-router

Tags:

I am trying to set a Route path with a query string. Something in the lines of:

www.mywebsite.com/results?query1=:query1&query2=:query2&query3=:query3 

I would than transition to the "Results" component like so:

<Route path="/" component={Main}>   <IndexRoute component={Home} />   <Route path="results?query1=:query1&query2=:query2&query3=:query3"     component={SearchResults} /> </Route> 

In the SearchResults container I would like to be able to have access do query1, query2 and query3 params.

I have not been able to make it work. I get the following error:

bundle.js:22627 Warning: [react-router] Location "/results?query1=1&query2=2&query3=3" did not match any routes

I tried following the steps in the following guide: (Section: What about query string parameters?) https://www.themarketingtechnologist.co/react-router-an-introduction/

Can I get some help here?

like image 279
samello Avatar asked Mar 20 '16 02:03

samello


People also ask

How do I get query string in react router?

Get a single Query String value location.search object: import React from 'react'; import { useSearchParams } from 'react-router-dom'; const Users = () => { const [searchParams] = useSearchParams(); console. log(searchParams); // ▶ URLSearchParams {} return <div>Users</div>; };

How do you parse a queryString in react?

Once you have the location object, you can retrieve and parse the query string like this: const location = useLocation(); const queryString = location.search; const params = new URLSearchParams(queryString); console. log(params.

What is the use of queryString?

A querystring is a set of characters input to a computer or Web browser and sent to a query program to recover specific information from a database .

What is queryString in URL?

A query string is the portion of a URL where data is passed to a web application and/or back-end database. The reason we need query strings is that the HTTP protocol is stateless by design. For a website to be anything more than a brochure, you need to maintain state (store data).


1 Answers

If you are using React Router v2.xx, you can access the query parameters via the location.query object passed in to your Route component.

In other words, you could rework your route to look like the following:

<Route path="results" component={SearchResults} /> 

And then inside your SearchResults component, use this.props.location.query.query1 (similar for query2 and query3) to access the query parameter values.

EDIT: This is still the case for React Router v3.xx.

like image 178
Jon Rubins Avatar answered Oct 20 '22 00:10

Jon Rubins