Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update wiki: Tutorial for navigating programmatically is not complete #109

Open
FabianEbert opened this issue Mar 24, 2020 · 0 comments
Open

Comments

@FabianEbert
Copy link

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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant