The Router no longer passes a state (on from 0.2.6)

[serkoma]

Stencil version:
@stencil/router version >0.2.6

I'm submitting a ...
[ x] bug report
[ ] feature request
[ ] support reques

Current behavior:
Starting with version 0.2.7 a state cannot be passed with a

this.history.push('/datum', {target: 'whatever'});

It can be checked with the demo app from
the stencil-router-master.
There is no more state in history.location!

This started with 0.2.7 and is true till
version 0.3.1 (router) and 0.0.9-1(state)

Expected behavior:
Using version 0.2.6 (router) everything works fine.

Other information:
Ist seems, that this started with the dependence of the router to the stencil-state.

[Guster woei]

I'm experiencing the same problem as well. Not just state, even query isn't working anymore

[modemlooper]

got it to work passing these keys together

this.history.push({ pathname: '/sites/1', state: { name: 'Site 1' }, query:{}, key: '' });

[Alon Bukai]

Any chance of possibly getting this fixed in an upcoming release please :)

[David Quast]

I just found this same bug when working on my project.

The problem is in a change made in location-util.ts@L144-46. The offending code:

if (location.state !== undefined) {
  location.state = state;
}

It used to be:
location.state = state;

The problem with the change is location.state is always undefined, so the if statement never executes and the value of state is never saved.

@modemlooper Is correct in a way, that this problem can be avoided by passing an object as the first parameter to the push function. Doing so executes the second branch of code in the createLocation function. The second branch doesn't touch the state property and since it is already defined, it gets passed along fine.

The problem with doing that is if you push a new location onto the History stack with the push function, and the user then presses the back button to pop that state off, the createLocation function is called with the path as a string, and the bug presents itself again. All previous states are lost!!

I've created a repo that illustrates this problem.
Clone, install then run with npm start. One button pushes a state with a path (creates the problem). The second button pushes a state with the object (that works). But then if you press the browser back button, the state value is lost.

I have created a fix (along with tests) for this problem and will submit it as a PR.