404路由
场景:当浏览器输入url的路径在整个路由配置中都找不到对应的path,为了用户体验,可以使用404兜底组件进行渲染
实现步骤
- 准备一个404组件
- 在路由表数组的末尾,以*号作为路由path配置路由
新建404组件
const NotFound =()=>{return (<div>未找到页面</div>)
}
export default NotFound
在路由表数组的末尾,以*号作为路由path配置路由
import Login from "../page/Login/index";
import NotFound from '../page/404/index';import { createBrowserRouter } from "react-router-dom";
const router = createBrowserRouter([{path: "/login",element: <Login></Login>,},{path:'*',element:<NotFound></NotFound>}
]);
export default router;