Query string parameters about router HOT 14 CLOSED

This is quite essential. At the least the query params could be passed to the component as an object.

from router.

Any news? Essential to be able to do oAuth.

from router.

OAuth is an important use case that Vaadin Router needs to support better. Currently, as long as this issue is open, OAuth redirects can be handled with the standard browser APIs to access the query string. For example, this demo shows how to define a route to handle OAuth redirects: https://vaadin-router-oauth.glitch.me

To me this issue looks more like a DX enhancement, rather than a blocker for OAuth support. There are plans to put more effort into supporting authorization and authentication use cases in Vaadin Router later this year. This includes this issue as well.

Could you please check the example I've linked above to see if it matches your use case? If you have a different use case in mind, and you are sill blocked by this issue, then could you please describe your use case in more details? Thanks!

from router.

@vlukashov exactly, DX enhancement! Right now I'm using the window.location in the route action.

And thanks for the demo!

from router.

I have a use-case where my app has a query-parameter that needs to be retained when doing in-app navigation.
say i do an in-app navigation via a link like this: a
essentially, the ?param=xyz is stripped from the url it seems. so, the parameter is not available after navigation.
is there a workaround i can use to make sure the query parameters survive navigation as long as query-string parameters are not officially supported?

thanks,
daniel

from router.

The version 1.4.x should be supporting this without any workarounds. Here is a demo showing that it's working: https://vaadin-router-search-and-hash.glitch.me/ (source)

@38leinaD, could you please update Router to the last version and check if the issue is still there?

from router.

@vlukashov thanks. works great with version 1.4.1.

from router.

It's a pain that users have to manipulate (parse and stringify) the query string and hash themselves. To simplify things on users' end,

1. urlForName and urlForPath should accept an object of query parameters and a hash.

   export interface UrlOptions {
     params?: Record<string, string>;
     queryParams?: Record<string, string>;
     hash?: string;
   }
   
   urlForName(name: string, options: UrlOptions = {})
   urlForPath(path: string, options: UrlOptions = {})

2. The return value of createLocation should have two additional fields queryParams: Record<string, string> and hash: string.

from router.

In addition, Router.go should support query parameters and hash as well.

from router.

Facing a need for this feature right now. Looking forward to getting this official supported by the library.

from router.

urlForName, urlForPath, and Router.go still don't support query parameters and hash. How can this issue be closed?

from router.

@jolleekin hi, thanks for asking. We’ve realised that generating URLs with query parameters and hash topic is missing in the docs. However, we also thought that extending the Router APIs for that purpose brings very little value over what is already possible using URLSearchParams and string concatenation:

const urlWithParams = router.urlForName('home') + '?' + new URLSearchParams({foo: 'bar'}).toString();

We should probably add examples with this approach to the URL Generation demo page.

Would that be enough to cover your needs?

from router.

The biggest problem is Router.go doesn't support search and hash. I had to write the following methods as a workaround.

  export type RouteParams = Record<string, string | string[]>;

  export interface RouteData {
    params?: RouteParams;
    queryParams?: Record<string, string>;
    hash?: string;
  }

////////////////////////////

  goToRoute(name: string, data: RouteData): void {
    const pathname = this._$router.urlForName(name, data.params);
    let search = data.queryParams
      ? new URLSearchParams(data.queryParams).toString()
      : '';
    if (search) search = '?' + search;
    this.go({ pathname, search, hash: data.hash });
  }

  /**
   * @param url The URL, which is relative to the base URL and may contain
   * search and/or hash.
   */
  goToUrl(url: string): void {
    let h = url.indexOf('#');
    if (h < 0) h = url.length;
    let q = url.indexOf('?');
    if (q < 0) q = h;
    const pathname = url.substring(0, q);
    const search = url.substring(q, h);
    const hash = url.substring(h);
    this.go({ pathname, search, hash });
  }

  go(urlParts: { pathname: string; search?: string; hash?: string }): void {
    window.dispatchEvent(
      new CustomEvent('vaadin-router-go', {
        cancelable: true,
        detail: urlParts,
      })
    );
  }

from router.

@jolleekin yes, this is definitely a missing feature in Router.go. Thanks for pointing this out.

from router.