React路由404页面配置

path路径使用' * '号,表示匹配不到路径时使用该路径

代码示例：

App.js

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'
import Article from './components/Article'
import ArticleOne from './components/ArticleOne'
import ArticleTwo from './components/ArticleTwo'
import NotFound from './components/NotFound'function App () {return (<BrowserRouter><Link to='/'>文章</Link><Routes>{/* 二级嵌套路由 */}<Route path='/' element={<Article />}>{/* 二级嵌套路由-默认路由 */}<Route index element={<ArticleOne />}></Route><Route path='/articletwo' element={<ArticleTwo />}></Route></Route>{/* 404页面 */}<Route path='*' element={<NotFound />}></Route></Routes></BrowserRouter>)
}

NotFound.js

function NotFound () {return (<div><h1>404</h1><p>对不起，这个页面不存在</p></div>)
}

React路由404页面配置相关推荐

tp5 404页面配置信息
一.在application文件夹下config.php配置文件 1.// 关闭应用调试模式 'app_debug' => false, 2.// 异常页面的模 ...
第三百九十一节，Django+Xadmin打造上线标准的在线教育平台—404，403，500页面配置...
第三百九十一节,Django+Xadmin打造上线标准的在线教育平台-404,403,500页面配置路由映射在全局也就是根目录里的urls.py里配置404路由映射注意:不是写在urlpatte ...
37、Django实战第37天：404以及500页面配置
1.把404.html,500.html复制到templates下,替换静态文件路径 2.编辑users.views.py定义404,505函数 from django.shortcuts impor ...
SpringCloud Gateway配置自定义路由404坑
一.场景复现微服务自定义路由,返回404页面. ①如图: (1)springcloud-gateway的路由设置 @Configuration public class RouteConfig {@ ...
2种方式解决vue路由跳转未匹配相应路由避免出现空白页面或者指定404页面
1.路由全局守卫在做项目的时候,遇到需要做路由跳转,但当用户输入错误url地址,或是其它非法url路由地址,我们或许会想到跳转至404页面.不管你有没有写一个404页面,当出现未匹配路由都需重新指定 ...
React路由配置：React Router
官方文档地址: https://reacttraining.com/react-router/web/api/Route/component 里面都有详细的react路由配置,还有代码演示. 1.安装 ...
react 路由配置以及封装
react 路由配置以及封装 1.新建App.tsx文件 import React, { Component } from 'react' import IsRouter from './router ...
react路由配置,路由跳转与传值,路由监听
1.react路由配置 1.1 下载react的路由模块 (默认最新6.3, 如需使用5.x, 在模块名后加@5) npm install react-router-dom --save // 6.0 ...
vue react 路由history模式刷新404问题解决方案
vue react 路由history模式刷新404问题解决方案参考文章: (1)vue react 路由history模式刷新404问题解决方案 (2)https://www.cnblogs.co ...

React路由404页面配置

React路由404页面配置相关推荐

最新文章

热门文章