用户登录

在 React 应用里可以定义一个无匹配路由,这样用户访问的地址如果不匹配任何路由,就会显示这个无匹配路由。

先在浏览器试一下,访问一个在应用里并不存在的路由地址,比如 dashboard,现在会显示一个空白的页面,控制台上也会出现警告,提示 No routes matched location /dashboard,没有路由匹配 /dashboard 这个地址。

在项目里新建一个文件,放在 src/pages 里面,名字是 not-found.tsx,在文件里定义一个组件,名字是 NotFound,在组件里先用一下 useEffect ,提供一个回调,在回调里设置一下 document.title,把页面标题设置成 404

然后在组件的显示这里,一组 div 标签,里面包装的是一组 h1,文字是 404。

然后打开 app-router,在这组路由的最后,再定义一个路由,添加一个 Route,路由的 elemnt 设置成刚才定义的 NotFound 这个组件。然后设置一下这个路由的 path,把路由地址设置成 * ,意思是如果不匹配上面定义的这些路由,就匹配这个地址是 * 的这个路由。

在浏览器测试一下,现在访问在应用里不存在的路由地址的时候,在页面上就会显示 NotFound 这个组件提供的东西。

在 React 应用里定义无匹配路由《 React 前端应用开发:应用路由 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点