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);