Menu
How can i route in an Angular 2 app without changing the URL? (this is because the app is located under one of several tabs on a page of a Django app, where it's suitable to leave the URL unchanged.)
currently i have something like this inside app.component.ts
@RouteConfig([ { path: '/home', name: 'Home', component: HomeComponent, useAsDefault: true }, { path: '/user/:id', name: 'UserDetail', component: UserDetailComponent } ]) and inside say HomeComponent, navigation to a user page uses the following
this._router.navigate(['UserDetail', {id: id}]); then the url will look like http://localhost:8000/django_url/user/123
is it possible to have the url unchanged when i navigate within the Angular 2 app? so the url will stay http://localhost:8000/django_url when a user is on page user/123 ?
Thanks!
926
You don't but the router does through PlatformLocation . This is what updates the URL. If you provide a custom implementation for PlatformLocation you can prevent this. I haven't thought a lot about this yet.
In order to update the route without a reload of the entire component (page) I had to resort to plain ol' JavaScripts replaceState function. This way, the current route is substituted for a new one. If you want to keep the history, you can use pushState.
To use React Router without changing the URL, we can use the MemoryRouter component. to import the MemoryRouter component and then wrap it around App to let us navigate with React Router without changing URLs.
difference between the two navigateByUrl is similar to changing the location bar directly–we are providing the “whole” new URL. Whereas router. navigate creates a new URL by applying an array of passed-in commands, a patch, to the current URL.
Update
router.navigateByUrl("/team/33/user/11", { skipLocationChange: true }); <a [routerLink]="..." skipLocationChange>click me</a> Update
There is a PR to support this directly https://github.com/angular/angular/pull/9608
Related issues
Original
You can implement a custom PlatformLocation similar to BrowserPlatformLocation but instead of calling ot history.pushState(), history.replaceState(), history.back(), and history.forward() maintain the changes in a local array.
You can then make Angular use your custom implementation by providing it like
bootstrap(AppComponent, [provide(PlatformLocation, {useClass: MyPlatformLocation})]); Finally its working in Angular2 final release. You need to pass { skipLocationChange: true } while navigating to the path i.e.
this.router.navigateByUrl('path', { skipLocationChange: true }); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
