How to construct a query based URL in react

Question

I have an app that takes a search string and returns results in one route : hosts.abc.com:3000. The url doesn't change.

I want the search to be reflected in the url so I can share the link and users don't have to make all selection in the form fields.

eg: hosts.abc.com:3000/?type=all&query=coins

Is it possible to do this using react-router ?

It is possible, what do you have problem with?

Tomasz Mularczyk
– Tomasz Mularczyk

2018-05-06 07:15:57 +00:00
Commented May 6, 2018 at 7:15 — Tomasz Mularczyk
– Tomasz Mularczyk, Commented May 6, 2018 at 7:15

Tomasz Mularczyk · Accepted Answer · 2018-05-06 07:26:25Z

10

To construct such query you could use native browser URLSearchParams:

const searchParams = new URLSearchParams();
searchParams.append("type", "all");
searchParams.append("query", "coins");
searchParams.toString(); // "type=all&query=coins"

// update browser url
this.props.history.push('/current/route/?' + searchParams.toString());
// or
this.props.history.push({
  pathname: '/current/route/',
  search: searchParams.toString()
})

But if you want better support query-string is a similar option.

answered May 6, 2018 at 7:26

Tomasz Mularczyk

36.4k19 gold badges118 silver badges176 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

kbang Over a year ago

This is much harder than i thought. the history.push does add it to the url, But when I visit the url ,say, hosts.abc.com:3000/?type=all&query=coins Its just showing the base page hosts.abc.com:3000/ . How can i perform call the search function?

kbang Over a year ago

Also, I want /home and /home/:query in my routes file, This is leading to same content being displayed twice

kbang Over a year ago

had to use componentDidMount method to parse parameters and us an if condition to not set if the query is already present in url

Collectives™ on Stack Overflow

How to construct a query based URL in react

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related