Handling URL patterns with JS
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);