Possibility to send data on navigation

[Fdom92]

Hi, i miss this functionality and i think will be useful.

I was playing with stencil router and i get some work around to do this.

On the router link:

handleClick(e) {
    e.preventDefault();
    const router = document.querySelector(this.router);
    if (!router) {
      console.warn(
        '<stencil-route-link> wasn\'t passed an instance of the router as the "router" prop!'
      );
      return;
    }

    router.navigateTo(this.url);
  }

If you add a new Prop to receive an object, you can send that data to the other page like this: router.navigateTo(this.url, this.data);

Then on router:

 @Method()
  navigateTo(url: string, _data: any = {}) {
    window.history.pushState(null, null, url || '/');
    this.routeMatch = {
      url: url
    };
    this.stencilRouterNavigation.emit(this.routeMatch);
  }

Maybe can propagate the data like this:

    this.routeMatch = {
      url: url,
      data: data
    };

And then on route use the data on the props: return <ChildComponent props={this.componentProps} />;

So you can send data like on ionic with data from one view to another.

[jthoms1]

Changes are coming down the pipe to the router. I am doing a full rewrite and this is changing quite a bit. I will provide documentation soon, but passing data as part of the route change will now be the second parameter. this.activeRouter.push(url, data);

[Fdom92]

Great! So ill keep patient and wait for the docs and new version.

Thanks for the reply.

[jthoms1]

So you can now pass application state information within the route transitions. This is the second parameter of the activeRouter.push method. An example of its usage can be seen here. https://github.com/ionic-team/stencil-router/blob/master/src/components/__tests__/test-demo-three.tsx#L26

In order to access this information it lives within the component props location.state. This can also be seen in the components linked above.