当用户访问一个不存在的路由时，可以通过设置 路由重定向 或 错误页面显示 来将用户引导到一个 404 Not Found 页面。具体实现方式根据你使用的前端框架或库不同而有所不同。下面是一些常见框架的实现方式：
1. React Router（React）
在 React Router 中，你可以使用 <Route> 来匹配所有的路由，并通过 <Redirect> 或 <Navigate> 来实现 404 页面重定向。
示例：
import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import NotFound from './NotFound'; // 404 页面组件
import Home from './Home'; // 首页组件
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<Home />} />
{/* 定义 404 页面 */}
<Route path="*" element={<NotFound />} />
</Routes>
</Router>
);
}
export default App;解释：
path="*"表示匹配所有未定义的路由，用户访问一个不存在的路由时会显示<NotFound />组件，即 404 页面。
2. Vue Router (Vue.js)
在 Vue.js 中，使用 Vue Router 来处理路由。可以使用 path: '*' 来捕获所有不存在的路由并重定向到 404 页面。
示例：
import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Home.vue';
import NotFound from './components/NotFound.vue';
const routes = [
{ path: '/', component: Home },
{ path: '/:pathMatch(.*)*', component: NotFound }, // 匹配所有不存在的路由
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;解释：
/:pathMatch(.*)*捕获所有不存在的路由并重定向到NotFound组件。
3. Angular (Angular Router)
在 Angular 中，可以使用 <Route> 定义捕获路径的配置，未定义的路由会跳转到 404 页面。
示例：
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { NotFoundComponent } from './not-found/not-found.component';
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: '**', component: NotFoundComponent }, // 匹配所有未定义路由
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule {}解释：
path: '**'用于匹配所有不存在的路径，用户访问的不存在的路由会重定向到NotFoundComponent组件。
4. Next.js (React)
在 Next.js 中，你可以利用 getInitialProps 或直接在 pages/_error.js（或 pages/404.js）中自定义 404 页面。
示例：
// pages/404.js
function Custom404() {
return <h1>404 - Page Not Found</h1>;
}
export default Custom404;解释：
- 在 Next.js 中，
pages/404.js会自动被用作 404 页面，当用户访问一个不存在的路由时，会自动显示这个页面。
5. 纯 HTML/JavaScript
如果是没有前端框架的纯 HTML/JavaScript 页面，可以通过 JavaScript 来检查页面路由并进行重定向。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>404 Page</title>
</head>
<body>
<div id="app"></div>
<script>
const path = window.location.pathname;
if (path !== '/' && path !== '/home') {
window.location.href = '/404.html'; // 重定向到 404 页面
} else {
// 正常渲染内容
document.getElementById('app').innerHTML = '<h1>Welcome to Home</h1>';
}
</script>
</body>
</html>解释：
- 通过
window.location.pathname获取当前路径，如果路径不匹配已有的路由，则重定向到/404.html页面。
总结：
- React Router 和 Vue Router 都可以通过特殊的
path="*"或path=":pathMatch(.*)*"来捕获未定义的路由，并重定向到 404 页面。 - Angular Router 使用
path: '**'来实现类似功能。 - Next.js 自动提供了
pages/404.js用于处理 404 页面。 - 纯 HTML/JavaScript 也可以通过检查
window.location.pathname来实现重定向。
根据你使用的框架，可以选择合适的方式来实现 404 页面重定向。
最后更新于: