stencil-community/stencil-router

Update wiki: Tutorial for navigating programmatically is not complete

FabianEbert opened this issue · 0 comments

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

Wiki link: https://github.com/ionic-team/stencil-router/wiki/Navigating-Programmatically
See also: #79 (comment)

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:
The tutorial for navigating programmatically is not complete. The information that the history has be injected into the component so the property is set is missing.

Expected behavior:
The tutorial should look like this:

If you are in a routed component ( a component that has been included in a stencil-route) and would like to navigate programmatically you first need to pass the router history in as a Prop to your component. Below is an example of this:

import { RouterHistory, injectHistory } from '@stencil/router';

export class askPage {
  @Prop() history: RouterHistory;
}

injectHistory(askPage);

You can then use the following methods on the history object to navigate:

// pushing a route (going forwards to a certain route)
this.history.push(`/demos`, {});

// popping a route (going back to a certain route)
this.history.pop('/home', {});

// navigate back as if the user hit the back button in the browser
this.history.goBack();

// navigate forwards as if the user hit the forwards button in the browser
this.history.goForward();

// replace the current nav history and reset to a certain route
this.history.replace('/', {});

// navigate through the history stack by `n` entries
this.history.go(n: number);