在网址中附加搜索参数

Question

I'm trying to filter some stocks. Basically, search parameters in url trigger different graphQL calls to get the right filtered content.

My url looks like this: localhost:3000/stocks?orderBy=id_stock&orderWay=asc&page=1

I have a form that lets you select your wanted filters. Let's say you want every item with the color with an id_color = 1 , I want that on form submit, &color=1 appends to the existing url, to give: localhost:3000/stocks?orderBy=id_stock&orderWay=asc&page=1&color=1 .

Is there a way to do this simply? I tried working around this.props.history.push() but it does not seem like that's what I want to do.

Answer 1

history.push() and history.replace() is the only way to programmatically change the URL in react router. If you want to append something to the current path you can simply do something like follows.

this.props.history.push(this.props.match.url + "&color=1")

this.props.match.url gives you current path and here we basically create the new path by appending the new param to the current path.