如何使用React Router处理404错误页面?

在使用 React Router 时,可以通过设置一个特殊的路由来处理 404 错误页面。通常,404 页面用于显示用户访问的路径不存在时的提示信息。以下是实现步骤:

1. 创建 404 组件

首先,创建一个简单的 404 组件。例如,命名为 NotFound.js

// NotFound.js
import React from 'react';

const NotFound = () => {
  return (
    <div>
      <h1>404 - 页面未找到</h1>
      <p>抱歉,您访问的页面不存在。</p>
    </div>
  );
};

export default NotFound;

2. 在路由中添加 404 路由

在你的主应用组件中,使用 Switch 组件来设置路由。将 NotFound 组件作为最后一个 Route,这样它会在没有其他路由匹配时渲染。

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home fro
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值