20、React应用的路由扩展与Firebase集成

React应用的路由扩展与Firebase集成

1. 创建NotFound组件

在Letters应用中，当用户尝试访问不存在的路由时，当前的路由组件并不会处理这种“未找到”的情况。为了给用户更好的体验，我们需要创建一个简单的 NotFound 组件，并在路由配置中进行相应的设置。

1.1 创建NotFound组件

在 src/pages/404.js 文件中创建 NotFound 组件，代码如下：

import React from 'react';
import Link from '../components/router/Link';

export const NotFound = () => {
    return (
        <div className="not-found">
            <h2>Not found :(</h2>
            <Link to="/">
                <button>go back home</button>
            </Link>
        </div>
    );
};

export default NotFound;

1.2 集成NotFound组件到路由配置

在路由配置中，使用 * 字符来匹