# 09-react-router 中文文档

规范地址：https://npmcn.com/package/09-react-router/

版本：0\.0\.4
npm 元数据更新时间：2023-08-05T19:19:52.699Z
中文译文更新时间：2026-10-31T11:52:28.537Z
软件包许可：MIT

本文由上游 README 机器翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/09-react-router
原文对照：https://npmcn.com/package/09-react-router/?lang=original

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：13.6 kB，19 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- 运行依赖：3 个
- 首次发布：2023-08-05T17:30:57.839Z
- 最新版本发布：2023-08-05T19:19:52.606Z
- 已发布版本数：4（近 12 个月 0 个）

## 中文简介

这个npm包为React提供了自定义版本的Router、Route和Link组件。这些组件被设计为轻量级、灵活且易于使用，允许您在React应用程序中有效地处理客户端路由。

## 安装

```sh
npm install 09-react-router
```

也可以使用：`pnpm add 09-react-router`、`yarn add 09-react-router`、`bun add 09-react-router`

## README

# 09 react路由器

这个npm包为React提供了自定义版本的Router、Route和Link组件。这些组件被设计为轻量级、灵活且易于使用，允许您在React应用程序中有效地处理客户端路由。

## 安装

你可以使用npm或yarn来安装这个包：

```bash
npm i 09-react-router

# or

yarn i 09-react-router
```

## 使用

要使用React Router组件，请遵循以下步骤：

1.  导入组件：

```jsx
import { Router, Route, Link } from '09-react-router'
```

2.  在应用程序中设置路由：

```jsx

export function App() {
    return (
    <Router>
      <Route
        path="/"
        Component={() => {
          return (
            <>
              <h1>Home</h1>
              <nav>
                <ul>
                  <li>
                    <Link to="/">Home</Link>
                  </li>
                  <li>
                    <Link to="/about">About</Link>
                  </li>
                  <li>
                    <Link to="/contact">Contact</Link>
                  </li>
                </ul>
              </nav>
            </>
          );
        }}
      />
      <Route
        path="/about"
        Component={() => {
          return (
            <>
              <h1>About</h1>
              <nav>
                <ul>
                  <li>
                    <Link to="/">Home</Link>
                  </li>
                  <li>
                    <Link to="/about">About</Link>
                  </li>
                  <li>
                    <Link to="/contact">Contact</Link>
                  </li>
                </ul>
              </nav>
            </>
          );
        }}
      />
      <Route
        path="/contact"
        Component={() => {
          return (
            <>
              <h1>Contact</h1>
              <nav>
                <ul>
                  <li>
                    <Link to="/">Home</Link>
                  </li>
                  <li>
                    <Link to="/about">About</Link>
                  </li>
                  <li>
                    <Link to="/contact">Contact</Link>
                  </li>
                </ul>
              </nav>
            </>
          );
        }}
      />
    </Router>
    )
}
```

3.  定义路由组件：

```jsx
export const Home = () => <h2>Home</h2>
export const About = () => <h2>About</h2>
export const Contact = () => <h2>Contact</h2>
```

## 组件

### 路由器

Router组件是最顶层的组件，它保存路由配置，并根据当前URL呈现适当的Route组件。

道具:

routes:（可选）包含可选路由的数组，而不是Route组件。例子:

```javascript
const routes = [
    {
     path: '/',
     Component: () => <h1>Home</h1>
    },
    {
     path: '/about',
     Component: () => <h1>About</h1>
    }
]
```

defaultComponent:（可选）当Router中存在路由或子路由时，默认渲染的组件。

### 路线

Route组件用于定义路由，并在URL与指定的路径匹配时呈现相应的组件。

道具:

path (string)：路由的URL路径。 component (function)：当URL与路径匹配时要呈现的React组件。

### 链接

Link组件用于创建在不同路由之间导航的链路。

道具:

to (string)：单击链接时导航到的URL路径。

### 贡献

欢迎投稿！如果您发现任何问题或有改进建议，请随时打开新问题或提交拉取请求。

这只是一个npm包，用于重新创建自己的路由器，仅用于教学目的。

## 常见问题

### 09-react-router 是什么？

这个npm包为React提供了自定义版本的Router、Route和Link组件。这些组件被设计为轻量级、灵活且易于使用，允许您在React应用程序中有效地处理客户端路由。

### 如何安装 09-react-router？

在项目目录运行 npm install 09-react-router，或使用 pnpm add / yarn add / bun add。

### 09-react-router 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/09-react-router 是否存在。

### 09-react-router 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### 09-react-router 可以商用吗？

09-react-router 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### 09-react-router 还在维护吗？

最新版本 0\.0\.4 发布于 2023/08/06（3 年前）；至今共发布 4 个版本，其中过去 12 个月发布了 0 个；首次发布于 2023/08/06。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。