Javascript Angular 2 如果路径不存在，如何重定向到 404 或其他路径

Angular 2 How to redirect to 404 or other path if the path does not exist

提问by Jason Seah

I was trying to redirect 404 /other path if the path does not exist in angular 2

/如果路径在角度 2 中不存在，我试图重定向 404其他路径

I tried research there is some method for angular 1 but not angular 2.

我试过研究有一些方法可以用于角度 1 但不是角度 2。

Here is my code :

这是我的代码：

@RouteConfig([
{
    path: '/news',
    name: 'HackerList',
    component: HackerListComponent,
    useAsDefault: true
},
{
    path: '/news/page/:page',
    name: 'TopStoriesPage',
    component: HackerListComponent
},
{
    path: '/comments/:id',
    name: 'CommentPage',
    component: HackerCommentComponent
}
])

So example if I redirect to /news/page/then it works and it return me an empty page how do you handle this kind of case happen?

例如，如果我重定向到/news/page/然后它可以工作并且它返回一个空页面你如何处理这种情况发生？

回答by Shaishab Roy

For version v2.2.2 and newer

对于 v2.2.2 及更新版本

In version v2.2.2 and up, nameproperty no longer exists and it shouldn't be used to define the route. pathshould be used instead of nameand no leading slashis needed on the path. In this case use path: '404'instead of path: '/404':

在 v2.2.2 及更高版本中，name属性不再存在，不应用于定义路由。应该使用路径而不是名称，并且路径上不需要前导斜杠。在这种情况下使用path: '404'代替path: '/404'：

 {path: '404', component: NotFoundComponent},
 {path: '**', redirectTo: '/404'}

For versions older than v2.2.2

对于早于 v2.2.2 的版本

you can use {path: '/*path', redirectTo: ['redirectPathName']}:

你可以使用{path: '/*path', redirectTo: ['redirectPathName']}：

{path: '/home/...', name: 'Home', component: HomeComponent}
{path: '/', redirectTo: ['Home']},
{path: '/user/...', name: 'User', component: UserComponent},
{path: '/404', name: 'NotFound', component: NotFoundComponent},

{path: '/*path', redirectTo: ['NotFound']}

if no path matches then redirect to NotFoundpath

如果没有路径匹配则重定向到NotFound路径

回答by nuvio

As Angular moved on with the release, I faced this same issue. As per version 2.1.0the Routeinterface looks like:

随着 Angular 继续发布，我也遇到了同样的问题。根据2.1.0版，Route界面如下所示：

export interface Route {
    path?: string;
    pathMatch?: string;
    component?: Type<any>;
    redirectTo?: string;
    outlet?: string;
    canActivate?: any[];
    canActivateChild?: any[];
    canDeactivate?: any[];
    canLoad?: any[];
    data?: Data;
    resolve?: ResolveData;
    children?: Route[];
    loadChildren?: LoadChildren;
} 

So my solutions was the following:

所以我的解决方案如下：

const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: '404', component: NotFoundComponent },
    { path: '**', redirectTo: '404' }
];

回答by robnordon

My preferred option on 2.0.0and up is to create a 404 route and also allow a ** route path to resolve to the same component. This allows you to log and display more information about the invalid route rather than a plain redirect which can act to hide the error.

我在2.0.0及更高版本上的首选选项是创建 404 路由，并允许 ** 路由路径解析为相同的组件。这允许您记录和显示有关无效路由的更多信息，而不是可以隐藏错误的普通重定向。

Simple 404 example:

简单的 404 示例：

{ path '/', component: HomeComponent },
// All your other routes should come first    
{ path: '404', component: NotFoundComponent },
{ path: '**', component: NotFoundComponent }

To display the incorrect route information add in import to router within NotFoundComponent:

要显示不正确的路由信息​​，请在 NotFoundComponent 中的 import to router 中添加：

import { Router } from '@angular/router';

import { Router } from '@angular/router';

Add it to the constructior of NotFoundComponent:

将其添加到 NotFoundComponent 的构造函数中：

constructor(public router: Router) { }

constructor(public router: Router) { }

Then you're ready to reference it from your HTML template e.g.

然后你就可以从你的 HTML 模板中引用它了，例如

The page <span style="font-style: italic">{{router.url}}</span> was not found.

The page <span style="font-style: italic">{{router.url}}</span> was not found.

回答by Wetteren Rémi

As shaishab roy says, in the cheat sheet you can find the answer.

正如 shaishab roy 所说，您可以在备忘单中找到答案。

But in his answer, the given response was :

但在他的回答中，给出的回应是：

{path: '/home/...', name: 'Home', component: HomeComponent}
{path: '/', redirectTo: ['Home']},
{path: '/user/...', name: 'User', component: UserComponent},
{path: '/404', name: 'NotFound', component: NotFoundComponent},

{path: '/*path', redirectTo: ['NotFound']}

{path: '/home/...', name: 'Home', component: HomeComponent}
{path: '/', redirectTo: ['Home']},
{path: '/user/...', name: 'User', component: UserComponent},
{path: '/404', name: 'NotFound', component: NotFoundComponent},

{path: '/*path', redirectTo: ['NotFound']}

For some reasons, it doesn't works on my side, so I tried instead :

由于某些原因，它对我不起作用，所以我尝试了：

{path: '/**', redirectTo: ['NotFound']}

and it works. Be careful and don't forget that you need to put it at the end, or else you will often have the 404 error page ;).

它有效。小心，不要忘记你需要把它放在最后，否则你会经常出现 404 错误页面;)。

回答by Harikrishnan k

make sure ,use this 404 route wrote on the bottom of the code.

确保使用写在代码底部的这个 404 路由。

syntax will be like

语法会像

{
    path: 'page-not-found', 
    component: PagenotfoundComponent
},
{
    path: '**', 
    redirectTo: '/page-not-found'
},

Thank you

谢谢