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

Posted 2023-02-22

【中文标题】Angular 2如果路径不存在，如何重定向到404或其他路径[重复]

【英文标题】：Angular 2 How to redirect to 404 or other path if the path does not exist [duplicate]

【发布时间】：2016-07-15 14:58:07

【问题描述】：

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

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

这是我的代码：

@RouteConfig([

    path: '/news',
    name: 'HackerList',
    component: HackerListComponent,
    useAsDefault: true
,

    path: '/news/page/:page',
    name: 'TopStoriesPage',
    component: HackerListComponent
,

    path: '/comments/:id',
    name: 'CommentPage',
    component: HackerCommentComponent

])

例如，如果我重定向到/news/page/，那么它可以正常工作并返回一个空白页面，你如何处理这种情况？

【问题讨论】：

你用什么做路由？

我使用@RouteConfig 创建路由

【参考方案1】：

适用于 v2.2.2 及更新版本

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

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

适用于 v2.2.2 之前的版本

你可以使用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']

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

【讨论】：

我构建了一个角度测试项目，并在那里使用了这种技术。 /* 意味着任何东西。从 Angular Cheat Sheet Routing and Navigation 部分获得想法。 angular.io/docs/ts/latest/cheatsheet.html

但这仍然会返回状态 200。如何返回 404？

这似乎不再与嵌套路由结合使用。当您查看official documentation 时，您可以看到他们在开始时使用了该技术，但后来他们将其删除（不再提及）

如果，每个模块都包含自己的路由。 & 其中一个模块路由包含 path: '**', redirectTo: '/404' 然后接下来所有模块 url 模式从未调用它总是重定向到 /404。在匹配 ** 之前是否检查所有模块路由？

@ShaishabRoy 为什么path: '404', component: NotFoundComponent, path: '**', redirectTo: '/404' IMO 这已经足够了： path: "**", component: NotFoundComponent

【参考方案2】：

随着 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;
 

所以我的解决方案如下：

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

【讨论】：

这适用于 Angular 5（类似于您的解决方案）： const routes: Routes = [ path: 'home', component: HomeComponent , path: '', redirectTo: '/home' , pathMatch: 'full' , path: '404', component: NotfoundComponent , path: '**', redirectTo: '/404' ];

** 应该是列表中的最后一条路线，..

@Lonely 你的评论应该是它自己的答案！它为我节省了数小时的工作时间和理智！！

【参考方案3】：

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

简单的 404 示例：

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

要显示不正确的路由信息​​，请在 NotFoundComponent 中添加到路由器的导入：

import Router from '@angular/router';

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

constructor(public router: Router)

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

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

【讨论】：

当我尝试您的解决方案时，所有路由都重定向到 404。您的其他路由看起来像什么？

它不重定向，它加载NotFoundComponent，原始/无效路径仍然会在页面的URL中。

虽然这种方法看起来一样，但这种方法的主要好处是您保留了路由信息。根据其他答案的简单重定向会丢失上下文，因此您无法显示出了什么问题或提供超出通用“404”页面的日志记录。

@Ben，您需要在 404 路由之前提供其余的路由信息​​，因为 404 路由充当了一个失败。在示例路由的情况下，只有“/”路径有效。

这是正确的做法！为什么有人要在 404 的情况下重定向？如果是 404，我们只需要显示一个 404 组件并停留在那个无效的 url 上。另外，在重定向的情况下......如果我尝试导航到/invalid-path，然后被重定向到/404，那么如果我点击浏览器的“返回”按钮，那不会让我转到/invalid-path 和再次回到/404？

【参考方案4】：

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

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

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: '/**', redirectTo: ['NotFound']

它有效。小心别忘了你需要把它放在最后，否则你会经常出现 404 错误页面；）。

【讨论】：

我认为你这边的原因不工作是因为我们当时仍处于测试阶段，他们确实在发布版本上进行了一些更改。顺便说一句，更新答案=D

【参考方案5】：

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

语法类似于

    path: 'page-not-found', 
    component: PagenotfoundComponent
,

    path: '**', 
    redirectTo: '/page-not-found'
,

谢谢