如何在React Router中定义404错误页面组件？

在 React Router 里，定义 404 错误页面组件的过程通常包含创建组件以及将其集成到路由配置中。以下分别介绍 React Router v5 和 v6 中定义 404 错误页面组件的方法。

React Router v5

1. 安装 React Router v5

npm install react-router-dom@5

        

          
        
        
        

          

          AI 代码解读
        
      
      

2. 创建 404 错误页面组件

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

const NotFound = () => {
    return (
        <div>
            <h1>404 - 页面未找到</h1>
            <p>你访问的页面不存在，请检查 URL 或返回主页。</p>
        </div>
    );
};

export default NotFound;

        

          
        
        
        

          

          AI 代码解读
        
      
      

3. 集成到路由配置

// App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';
import NotFound from './NotFound';

const App = () => {
    return (
        <Router>
            <Switch>
                <Route exact path="/" component={Home} />
                <Route path="/about" component={About} />
                {/* 当没有匹配到任何路由时，渲染 NotFound 组件 */}
                <Route component={NotFound} />
            </Switch>
        </Router>
    );
};

export default App;

        

          
        
        
        

          

          AI 代码解读
        
      
      

在上述代码中，Switch 组件会按顺序匹配路由，若前面的路由都不匹配，就会渲染没有 path 属性的 Route，也就是 NotFound 组件。

React Router v6

1. 安装 React Router v6

npm install react-router-dom

        

          
        
        
        

          

          AI 代码解读
        
      
      

2. 创建 404 错误页面组件

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

const NotFound = () => {
    return (
        <div>
            <h1>404 - 页面未找到</h1>
            <p>你访问的页面不存在，请检查 URL 或返回主页。</p>
        </div>
    );
};

export default NotFound;

        

          
        
        
        

          

          AI 代码解读
        
      
      

3. 集成到路由配置

// App.js
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';
import NotFound from './NotFound';

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

export default App;

        

          
        
        
        

          

          AI 代码解读
        
      
      

在 React Router v6 中，Routes 组件会渲染第一个匹配的路由，path="*" 可以匹配所有未定义的路由，当用户访问的路径没有对应的路由时，就会渲染 NotFound 组件。

优化 404 页面

你可以为 404 页面添加更多样式和交互，例如添加返回主页的按钮：

// NotFound.js
import React from 'react';
import { Link } from 'react-router-dom';

const NotFound = () => {
    return (
        <div style={
  { textAlign: 'center', marginTop: '50px' }}>
            <h1>404 - 页面未找到</h1>
            <p>你访问的页面不存在，请检查 URL 或返回主页。</p>
            <Link to="/">返回主页</Link>
        </div>
    );
};

export default NotFound;

        

          
        
        
        

          

          AI 代码解读
        
      
      

这样，用户在遇到 404 错误时可以方便地返回主页。