react-router-dom v6中优雅处理404重定向问题

在基于React的单页面应用(SPA)中,使用 react-router-dom 库来管理路由是一项关键任务。当用户访问一个不存在的页面时,我们通常希望能够以优雅的方式处理404情况,从而提升用户体验。本文将探讨如何在React应用中使用react-router-dom的v6版本来优雅地处理404重定向问题,并为你的项目增添一份专业的风采。

React

一、安装与基本设置

首先,确保你的项目已经安装了 react-router-domv6 版本:

pnpm add react-router-dom@6

接着,在主应用组件中进行基本的路由配置,包括404的重定向:

import React from 'react';
import { BrowserRouter as Router, Route, Routes, Outlet, Navigate } from 'react-router-dom';import Home from './Home';
import About from './About';
import NotFound from './NotFound';function App() {return (<Router><Routes><Route path="/" element={<Home />} /><Route path="/about" element={<About />} /><Route path="*" element={<NotFound />} /> {/* 所有未匹配路由都重定向到404页面 */}</Routes></Router>);
}export default App;

二、创建404页面

为了提供更好的用户体验,我们需要创建一个专门的404页面组件,用于显示当用户访问不存在的页面时的内容:

import React from 'react';function NotFound() {return (<div><h2>404 - Page Not Found</h2><p>The page you are looking for does not exist.</p></div>);
}export default NotFound;

三、两种404重定向方案

1. 重定向到404页面

通过在主应用组件中使用 <Route path="*" element={<NotFound />} /> 配置,我们可以将所有未知路径都重定向到自定义的404页面,为用户提供明确的错误提示。

2. 重定向到首页

如果你更倾向于将用户引导回首页,可以使用导航元素 <Navigate to="/" replace /> 将所有未匹配路由重定向到首页。代码演示:

function App() {return (<Router><Routes><Route path="/" element={<Home />} /><Route path="/about" element={<About />} /><Route path="*" element={<Navigate to="/" replace />} /> {/* 所有未匹配路由都重定向到首页 */}</Routes></Router>);
}

四、实践经验与提升

  1. 导航链接: 无论是重定向到404页面还是首页,都可以在404页面上添加导航链接,使用户能够轻松返回其他页面。
  2. 定制404页面: 根据你的应用风格,定制404页面的样式和内容,以保持一致的用户体验。
  3. 动画效果: 为404页面添加过渡动画效果,能够使页面切换更加平滑,提升用户感知。
  4. React组件库: 如果你使用了UI组件库,可以在404页面中继续使用这些组件,保持一致的设计风格。

五、总结

通过合理配置 react-router-domv6 版本,我们能够在React应用中优雅地处理404重定向问题。无论是重定向到专门的404页面还是引导用户返回首页,都能够提升用户体验,为应用增添专业的形象。通过定制内容、样式、动画和组件,我们可以为用户呈现出更加友好和专业的404页面,从而提升整体用户体验。


欢迎访问:天问博客

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/217875.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

OpenAI 承认 ChatGPT 最近确实变懒,承诺修复问题

文章目录 一. ChatGPT 指令遵循能力下降引发用户投诉1.1 用户抱怨回应速度慢、敷衍回答、拒绝回答和中断会话 二. OpenAI 官方确认 ChatGPT 存在问题&#xff0c;展开调查三. OpenAI 解释模型行为差异&#xff0c;回应用户质疑四. GPT-4 模型变更受人事动荡和延期影响 一. Chat…

【小沐学Python】Python实现语音识别(Whisper)

文章目录 1、简介1.1 whisper简介1.2 whisper模型 2、安装2.1 whisper2.2 pytorch2.3 ffmpeg 3、测试3.1 命令测试3.2 代码测试&#xff1a;识别声音文件3.3 代码测试&#xff1a;实时录音识别 4、工具4.1 WhisperDesktop4.2 Buzz4.3 Whisper-WebUI 结语 1、简介 https://gith…

Python 自动化之修理excel文件(二)

批量合成excel文档Pro版 文章目录 批量合成excel文档Pro版前言一、做成什么样子二、基本架构三、库输入模块四、用户输入模块五、数据处理模块1.获取当前目录的文件信息2.创建Workbook实例对象3.遍历entries列表4.获取Excel文件的工作表信息5.命名和写入数据 六、数据输出模块1…

ssm(springboot儿童众筹救助系统 儿童捐赠系统Java系统

ssm(springboot儿童众筹救助系统 儿童捐赠系统Java系统 开发语言&#xff1a;Java 框架&#xff1a;ssm/springboot vue JDK版本&#xff1a;JDK1.8&#xff08;或11&#xff09; 服务器&#xff1a;tomcat 数据库&#xff1a;mysql 5.7&#xff08;或8.0&#xff09; 数…

[笔记] 使用 qemu/grub 模拟系统启动(多分区)

首先创建一块虚拟硬盘: dd bs512 count204800 if/dev/zero ofhd.img然后使用 losetup -f 将其关联为本地回环设备 losetup -f hd.img # 关联 hd.img 到空闲回环设备上 losetup -a /dev/loop0: [2080]:409 (/root/code/demo05/hd.img) # 查看刚刚关联到了哪里,这里关联到了 /d…

IEEE期刊论文模板

一、模板下载 1、登陆IEEE作者中心Author Center 地址&#xff1a;Publish with IEEE Journals - IEEE Author Center Journals 2、点击“Download a template” 3、在弹出的模板下载页面点击IEEE模板选择器“IEEE Template Selector” 4、在弹出的模板选择器页面点击“Tran…

分支预测失败的处理

由于现代的超标量处理器采用了很多预测的方法来执行指令,并不是流水线中所有的指令都可以退休(retire),例如当流水线中的某条分支指令发生了预测错误,或者某条指令发生了异常&#xff0c;那么在这条指令之后进入流水线的所有指令就不允许退休了&#xff1b; 此时需要将这些指令…

翻译: LLM大语言模型图像生成原理Image generation

文本生成是许多用户正在使用的&#xff0c;也是所有生成式人工智能工具中影响最大的。但生成式人工智能的一部分兴奋点也在于图像生成。目前也开始出现一些可以生成文本或图像的模型&#xff0c;这些有时被称为多模态模型&#xff0c;因为它们可以在多种模式中操作&#xff0c;…

代码随想录算法训练营第四十二天|背包问题理论基础、01背包理论基础(滚动数组)、416. 分割等和子集

代码随想录算法训练营第四十二天|背包问题理论基础、01背包理论基础&#xff08;滚动数组&#xff09;、416. 分割等和子集 背包问题理论基础 背包问题理论基础 文章讲解&#xff1a;https://programmercarl.com/%E8%83%8C%E5%8C%85%E7%90%86%E8%AE%BA%E5%9F%BA%E7%A1%8001%E…

谈谈常用的分布式ID的设计方案?

典型回答 首先&#xff0c;我们需要明确通常的分布式ID定义&#xff0c;基本的要求包括&#xff1a; 全局唯一&#xff0c;区别于单点系统的唯一&#xff0c;全局是要求分布式系统内唯一。 有序性&#xff0c;通常都需要保证生成的ID是有序递增的。例如&#xff0c;在数据库存…

iframe 与主应用页面之间如何互相通信传递数据

背景 当我们的Web页面需要复用现有网站的页面时&#xff0c;我们通常会考虑代码层面的抽离引用&#xff0c;但是对于一些过于复杂的页面&#xff0c;通过 iframe 嵌套现有的网站页面也是一种不错的方式&#xff0c;。目前我就职的项目组就有多个业务利用 iframe 完成业务的复用…

springboot整合websocket实现控制输入流

WebSocket 是一种在客户端和服务器之间进行实时双向通信的协议。它提供了一种更高效、更可靠的替代方案&#xff0c;以替代传统的HTTP请求-响应模式。 WebSocket 的特点包括&#xff1a; 双向通信&#xff1a;客户端和服务器可以同时发送和接收消息&#xff0c;而不像HTTP一样需…

QT 基础篇

目录 QPushButton QT帮助文档 QT 对象树 QPushButton QPushButton是Qt图形界面控件中的一种&#xff0c;看英文的意思&#xff0c;他就是按钮&#xff0c;是最基本的图形控件之一。在我们的最基本的项目中&#xff0c;运行: 是一个空白的窗体&#xff0c;里面什么也没有&am…

云原生之深入解析如何在Kubernetes中快速启用Cgroup V2支持

一、cgroup v2 有哪些优势&#xff1f; Linux 中有两个 cgroup 版本&#xff1a;cgroup v1 和 cgroup v2。cgroup v2 是新一代的 cgroup API。Kubernetes 自 v1.25 起 cgroup2 特性正式 stable。cgroup v2 提供了一个具有增强资源管理能力的统一控制系统&#xff0c;cgroup v2…

在Node.js中使用MongoDB连接数据库、创建集合

本文主要介绍在Node.js中使用MongoDB连接数据库、创建集合的方法。 目录 连接数据库使用原生驱动程序连接MongoDB数据库使用Mongoose连接MongoDB数据库 创建集合使用mongodb驱动程序 连接数据库 在Node.js中使用MongoDB连接数据库有两种方式&#xff1a;使用原生驱动程序和使用…

静态HTTP应用的性能优化技巧

在Web开发中&#xff0c;静态HTTP应用以其简单、快速和安全的特点受到了广泛欢迎。然而&#xff0c;随着Web应用的规模不断扩大&#xff0c;性能问题也日益突出。本文将为你介绍一些静态HTTP应用的性能优化技巧&#xff0c;让你的应用飞得更快、更稳定。 一、压缩文件 文件压…

以pycharm为例,生成Python项目所需要的依赖库/包文档:requirements.txt

平时我们在编写或者使用别人的Python项目时&#xff0c;往往会看到一个文档requirements.txt&#xff0c;该文档是描述一个Python项目中的第三方库的名称以及版本。本文介绍导出python当前项目依赖包requirements.txt的操作步骤。 方法一&#xff1a;如果每个项目有对应的虚拟…

Sumdiv

title: Sumdiv date: 2023-12-12 21:45:09 tags: 分治 categories: 算法进阶指南 题目大意 求 A B A^B AB 的所有约数之和 m o d mod mod 9901 9901 9901( 1 1 1 ≤ \leq ≤ A , B A,B A,B ≤ \leq ≤ 5 ∗ 1 0 7 5 * 10 ^ 7 5∗107) 解题思路 将 A A A 分解质因数&…

4-Docker命令之docker export

1.docker export介绍 docker export命令是用来将docker容器中的文件系统导出为一个tar归档文件 2.docker export用法 docker export [参数] container [rootcentos79 ~]# docker export --helpUsage: docker export [OPTIONS] CONTAINERExport a containers filesystem a…

开源工业以太网现场总线协议栈汇总

开源现场总线协议栈 EtherNet/IP、EtherCAT master、Profinet开源汇总&#xff1a; EtherNet/IP:https://github.com/EIPStackGroup/OpENer EtherCAT master:https://gitlab.com/etherlab.org/ethercat EtherCAT master:https://github.com/OpenEtherCATsociety/soem http…