Stencil router links are not marked active when using a URL with a query string

[nborelli]

Resources:
Before submitting an issue, please consult our docs.

Stencil version: (run npm list @stencil/core from a terminal/cmd prompt and paste output below):

 insert the output from npm list @stencil/core here

-- @stencil/core@0.12.4
-- @stencil/router@0.2.7-4

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com

Current behavior:

If I have a stencil-router-link with a url property of "/view?doc=/assets/packages/core/about.md", the link will not be marked active when I navigate to the router through the router link or by editing the browser URL. As far as I can tell from the router source, using the matchPath() utility function does not take into account the search or query properties of the RouterHistory.location object.

Expected behavior:

Even when using URLs with a query string, I would expect the active class to be set if the current browser URL is an exact match.

Steps to reproduce:

Related code:

return (
<div>
  <stencil-route-link url='/view?doc=/assets/docs/about.md' exact>About</stencil-route-link>
</div>,
<stencil-router class="root">
   <stencil-route-switch class='content' scrollTopOffset={0}>
       <stencil-route url='/' component='tf-home' exact />
       <stencil-route url='/view' component='tf-doc-viewer' exact />
    </stencil-route-switch>
</stencil-router>
);

I can provide a complete Plunker if needed, but it is pretty easy to reproduce,

I believe the problem starts here in the router-link.tsx file:

  // Identify if the current route is a match.
  @Watch('location')
  computeMatch() {
    if (this.location) {
      this.match = matchPath(this.location.pathname, {
        path: this.urlMatch || this.url,
        exact: this.exact,
        strict: this.strict
      });
    }

As you can see the search and query parameters are not being take into account when calling the matchPath() function.

Other information:

[jthoms1]

The problem is that you have it set to exact true. This will only match on /view exactly. If you remove exact it will match on params.

https://github.com/ionic-team/stencil-router/wiki/stencil-route-link