在React Router中，如何处理路由的404错误页面？

在 React Router 中，不同版本处理 404 错误页面的方式有所不同，下面分别介绍 React Router v5 和 v6 处理 404 错误页面的方法。

React Router v5

1. 安装 React Router v5

npm install react-router-dom@5

2. 处理 404 错误页面的实现

在 React Router v5 中，通常使用 Switch 组件结合一个没有 path 属性的 Route 来实现 404 错误页面。Switch 会渲染第一个匹配的 Route，如果没有匹配的 Route，则会渲染没有 path 属性的 Route。

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

// 首页组件
const Home = () => <h1>Home Page</h1>;
// 关于页面组件
const About = () => <h1>About Page</h1>;
// 404 错误页面组件
const NotFound = () => <h1>404 - Page Not Found</h1>;

const App = () => {
    return (
        <Router>
            <Switch>
                <Route exact path="/" component={Home} />
                <Route path="/about" component={About} />
                {/* 没有 path 属性的 Route 作为 404 页面 */}
                <Route component={NotFound} />
            </Switch>
        </Router>
    );
};

export default App;

在上述代码中，当用户访问的路径不匹配 / 或 /about 时，就会渲染 NotFound 组件，显示 404 错误信息。

React Router v6

1. 安装 React Router v6

npm install react-router-dom

2. 处理 404 错误页面的实现

在 React Router v6 中，Switch 组件被 Routes 组件取代，并且可以使用 path="*" 来匹配所有未定义的路径，从而实现 404 错误页面。

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

// 首页组件
const Home = () => <h1>Home Page</h1>;
// 关于页面组件
const About = () => <h1>About Page</h1>;
// 404 错误页面组件
const NotFound = () => <h1>404 - Page Not Found</h1>;

const App = () => {
    return (
        <Router>
            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/about" element={<About />} />
                {/* 使用 path="*" 匹配所有未定义的路径 */}
                <Route path="*" element={<NotFound />} />
            </Routes>
        </Router>
    );
};

export default App;

在这个示例中，当用户访问的路径不匹配 / 或 /about 时，path="*" 的 Route 会被匹配，从而渲染 NotFound 组件，显示 404 错误信息。

通过以上方法，你可以在 React Router 中有效地处理 404 错误页面，提升用户体验。