I want to use the alternate configuration of React Router: https://github.com/rackt/react-router/blob/1.0.x/docs/guides/basics/RouteConfiguration.md#alternate-configuration
However, I'm having trouble getting redirect to work. I tried this:
const routes = {
childRoutes: [
{ path: '/test', component: Test },
],
component: App,
path: '/',
redirect: {
from: '/',
to: '/test',
},
};
As far as I could tell, there is no documentation for this. Does the functionality exist? How should it be done?
Comparing the sample code in the link you posted, with the sample above (in Preserving URLs), I think both samples refer to setting the same routes (the only difference probably is that the last one uses the Alternate Configuration). And we can infer that the current way of making redirects is using the onEnter function.
For instance, if you want this (using JSX):
<Redirect from="messages/:id" to="/messages/:id" />
And you use the Alternate Configuration, you'll have to write it like this:
{ path: 'messages/:id',
onEnter: function (nextState, replaceState) {
replaceState(null, '/messages/' + nextState.params.id)
}
}
Update: Your particular case is special, because you want to redirect from /, so you might want to try using IndexRedirect or indexroute.
Related
I have tips.pdf that I would like to live at /tips.
When a user manually types in /tips I want it to redirect to /tips.pdf, preferably in a new tab.
When I updated my routing module I get Error: Cannot match any routes. URL Segment: 'tips'.
const ROUTES: Routes = [
{
path: '', redirectTo: '/home', pathMatch: 'full'
},
{
path: 'home', component: HomeComponent
},
{
path: 'fun', component: FunComponent
},
{
path: 'tips', redirectTo: '../assets/pdfs/tips.pdf', pathMatch: 'full'
}
]
Is this because I don't have a component? Obviously I don't want to create a component just for a stationary pdf in my asset folder.
It's because you don't have any route maching '../assets/pdfs/tips.pdf'. The first redirection works because home is matching the second entry in ROUTES.
You don't need Angular to do that, you need to add the redirection in your server configuration.
I don't think Angular can do that.
One thing you can try is create a dummy component that opens a url using window.open.
{
path: 'tips', component: FilOpenerComponent
}
export class FilOpenerComponent {
constructor(private router: Router) {
window.open("../assets/pdfs" + this.router.url + ".pdf");
}
}
And you can further generalize this component using query params to know exactly where to look for the file.
Either the current path or redirected path should have a component in Angular.
so as mentioned in one of the answer the logic has to be added in component
I'm trying to do something seemingly simple. I have the following defined:
#Routes([
{ path: '/stores', component: StoresComponent },
{ path: '/stores/new', component: StoresCreateComponent}
])
When I navigate to /stores I display a list of existing stores. I have a link on that page to navigate to a screen to create a new store. However, when I navigate to /stores/new, I get the following:
browser_adapter.ts:78Error: Uncaught (in promise): Component 'StoresComponent' does not have route configuration
I'm pretty new to Angular so I'm not entirely sure what I need to do in order to get a route like that working.
Order routes so that more specific ones come first and less specific ones last. That's a current limitation of the RC.1 router.
#Routes([
{ path: '/stores/new', component: StoresCreateComponent}
{ path: '/stores', component: StoresComponent },
])
I'm trying to do a master / detail type view in my Angular2 application. In my main app component, I have the following routes defined:
#Routes([
{ path: '/', component: HomeComponent },
{ path: '/brands/:brandId/...', component: BrandShowComponent },
{ path: '/brands', component: BrandListComponent }
])
I can navigate just fine to /brands where I show a list of Brands. When selecting a specific Brand, I'm trying to show the details of said Brand. In addition, the BrandShowComponent will also have child routes. Note the ... in the above route config. In BrandShowComponent I've defined a child route like so:
#Routes([
{ path: '/regions', component: RegionListComponent }
])
And I've added a <router-outlet></router-outlet> to the template for BrandShowComponent.
As I said, I can view the list of brands, but when I click on a specific brand, I get the following error in the console:
browser_adapter.ts:78 EXCEPTION: Error: Uncaught (in promise): Component 'BrandListComponent' does not have route configuration
I want BrandShowComponent to be the master, not BrandListComponent. I'm unsure what I might have configured incorrectly to make Angular think otherwise. Or if I'm getting bit by a RC issue.
This is a known issue in the current router.
Sort the routes so that the most significant came first:
#Routes([
{ path: '/brands/:brandId/...', component: BrandShowComponent },
{ path: '/brands', component: BrandListComponent }
{ path: '/', component: HomeComponent },
])
All the samples I come across on the web are SPAs, I'm wondering if Angular 2 has a build-in way to handle static pages. Specifically, let's say I use Angular 2 to build a blog site, and I wish users could go directly to a particular post without going through the default home component, (which also incidentally, loads a lot of server side config). I mean, how do I enable user to go to http://server/posts/:id directly, without 404 showing up or configure a ** page for unreachables.
Just need some directions, thanks.
Let's say my folder structure goes like this
/posts
/shared
/users
and my main router goes like this
#RouteConfig([
{ path: './shared/...', name: 'Shared', component: SharedComponent },
{ path: './users/...', name: 'Users', component: UserComponent },
{ path: './posts/...', name: 'Posts', component: PostComponent }
])
and post router goes like this
#RouteConfig([
{ path: '/', name: 'List', component: ListComponent, useAsDefault: true },
{ path: '/:id', name: 'Post', component: PostComponent },
{ path: '/:id/gallery', name: 'Gallery', component: GalleryComponent },
{ path: '/:id/comments', name: 'Comments', component: CommentListComponent },
])
I think I understand your problem. You need to configure your web server software (e.g., Apache) a certain way, this is not an Angular2 configuration issue. You need to configure your web server so that whenever it receives url requests like / or /posts or /posts/123 that it serves your main index.html file. Then Angular will automatically show the right content when it starts up.
Seems like you are looking for routers. Have a look at the docs:
Off. Guide and Router Tutorial. It's used like this:
#Component({ ... })
#RouteConfig([
{path:'/crisis-center', name: 'CrisisCenter', component: CrisisListComponent},
{path:'/heroes', name: 'Heroes', component: HeroListComponent},
{path:'/hero/:id', name: 'HeroDetail', component: HeroDetailComponent}
])
export class AppComponent { }
Its quite hard to tell the perfect answer as you are asking for without going through the default home component(I am not sure what do you mean by that).
AFAIK, in angular2 you can have one component which can define/set routes for other components and so their relevant view.
Let's say after defining routes in a single component, if you go with the HashLocationStrategy like below,
bootstrap(AppComponent, [provide(LocationStrategy,{useClass: HashLocationStrategy}]);
Angular2 will be able to provide you required route and so you don't need to configure server with some extra route setting. Then, you will be able to access required resource at http://server/#/posts/:id
If you go with PathLocationStrategy like below,
bootstrap(AppComponent, [provide(APP_BASE_HREF).toValue(location.pathname)]);
For this configuration angular2 will not be able to provide you required route and so server side routing needs to be configured. Then, you will be able to access required resource at http://server/posts/:id
So In short if required/asking path exits, it will take users to that path.
I know I'm a year late, but your issue is that whatever web-server you're using needs to rewrite urls to the index.html of your web-app. If it did that, then when you went to server/hero/123, the web-server would direct it to the index.html of your web-app, and your web-app would use the router to go to the HeroDetail component, without showing the default home component. Because you don't have the rewrite, the web-server is not even starting the angular app and is instead trying to serve the file server/hero/123, which doesn't exist and therefore it gives you a 404.
FYI this would still be a SPA (single page application).
I have the following routes object:
routes: {
"*defaults": "home",
'#test': 'test'
}
Here's the url options:
myApp.html // home is called as desired
myApp.html#test // home is called instead of test
What did I miss?
Per the docs, you don't need the hash mark in the route (that's implied by the Backbone routing convention). Also, the "*defaults" route is going to catch everything, so you should put it last after more specific routes. So, like this:
routes: {
'test': 'test'
"*defaults": "home",
}
Should result in myApp.html#test getting routed to test.