Handling URL patterns with JS I'm handling parameters that are passed from a URL. I want to keep my URLS neat, and the following (rather exhaustive code) has been able to achieve it.
There will be more added, so it would be good to keep it versatile and compact. Code below does work.
URLS patterns
a.com/

a.com/q=bar

a.com/filters=foo

a.com/q=bar&amp;filters=foo

Current code to account for above
const isSearch = this.props.location.pathname.includes(&quot;q=&quot;)
const isFilter = this.props.location.pathname.includes(&quot;filters=&quot;)

const encodedVal = encodeURIComponent(e.target.value)

if (encodedVal &amp;&amp; isSearch &amp;&amp; isFilter) {
    const filters = this.props.match.params.q.split(&quot;filters=&quot;)[1].split(&quot;&amp;&quot;)[0];
    this.props.history.push(&quot;/q=&quot; + encodedVal + &quot;&amp;filters=&quot; + filters );
  }
 else if (encodedVal &amp;&amp; isFilter) {
    const filters = this.props.match.params.q.split(&quot;filters=&quot;)[1].split(&quot;&amp;&quot;)[0];
    this.props.history.push(&quot;/q=&quot; + encodedVal + &quot;&amp;filters=&quot; + filters );
  }
 else if (encodedVal &amp;&amp; isSearch) {
    this.props.history.push(&quot;/q=&quot; + encodedVal);
  }
 else if (isFilter &amp;&amp; !encodedVal) {
    const filters = this.props.match.params.q.split(&quot;filters=&quot;)[1].split(&quot;&amp;&quot;)[0];
    this.props.history.push(&quot;/filters=&quot;  + filters);
  }
 else if (encodedVal) {
    this.props.history.push(&quot;/q=&quot; + encodedVal);
  }
  else {
    this.props.history.push(&quot;/&quot;);
  }
Fragile parsing of query parameters

For example, the implementation will silently convert a url like /bbq=grill&amp;pagefilter=foo into /q=grill&amp;filter=foo.

Inappropriate use of query parameters

The example urls use some sort of illegal form of query parameters.
Query parameters should come after ? in a url.
(The part of a url after ? is called the query string.)

Unclear purpose

It seems that encodedVal is the encoded value of q=.
If that's the case, it's not clear from the posted code.
If that's not the case,
then the posted code ignored the value of q=,
and it's not clear why.

On the other hand, the value of filter= is left untouched.

Why not encode all the query values?
It's puzzling.

Complicated parsing of query parameters

The chain of conditions is complicated,
fragile,
and it won't scale if you need to add something else later.
It's hard to understand and to modify.

It would be better to properly tokenize the query parameters into key-value pairs (so an object in JavaScript).
Let's call this object query.
Then, the implementation to build the url fragment can be written a simple straightforward way that's easy to understand and to extend.

var encodedUrl = "";

if (query.q) {
    encodedUrl += "&amp;q=" + encodeURIComponent(query.q);
}

if (query.filters) {
    encodedUrl += "&amp;filters=" + encodeURIComponent(query.filters);
}

// chop off any excess leading "&amp;"
if (encodedUrl) {
    encodedUrl.substr(1);
}

// let's make this a proper query string
this.props.history.push("?" + encodedUrl);