# @fleur/froute 中文文档

规范地址：https://npmcn.com/package/%40fleur/froute/

版本：1\.0\.9
npm 元数据更新时间：2023-10-23T02:25:54.743Z
中文译文更新时间：2026-11-14T22:53:04.219Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40fleur/froute
原文对照：https://npmcn.com/package/%40fleur/froute/?lang=original
项目主页：https://github.com/fleur-js/froute/
源码仓库：https://github.com/fleur-js/froute

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

- 包体积（解压后）：59 kB，19 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：3 个
- peer 依赖：react \>= 16\.8\.x
- 首次发布：2020-12-17T13:13:12.836Z
- 最新版本发布：2023-10-23T02:25:54.190Z
- 近 30 天下载量：2179（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：81（近 12 个月 0 个）

## 中文简介

React 安全而灵活的路由器

## 安装

```sh
npm install @fleur/froute
```

也可以使用：`pnpm add @fleur/froute`、`yarn add @fleur/froute`、`bun add @fleur/froute`

## README

![CI](https://img.shields.io/github/workflow/status/fleur-js/froute/CI?logo=github&style=flat-square) [![latest](https://img.shields.io/npm/v/@fleur/froute?style=flat-square)](https://www.npmjs.com/package/@fleur/froute) [![BundleSize](https://img.shields.io/bundlephobia/minzip/@fleur/froute?style=flat-square)](https://bundlephobia.com/result?p=@fleur/froute@2.0.1) [![License](https://img.shields.io/npm/l/@fleur/froute.svg?style=flat-square)](https://opensource.org/licenses/MIT) [![npm](https://img.shields.io/npm/dw/@fleur/froute.svg?style=flat-square&logo=npm)](https://www.npmjs.com/package/@fleur/froute)

# 花纹

[变化](https://npmcn.com/package/%40fleur/froute/pkgs/froute/CHANGELOG.md)

框架独立路由器 React.  
可同时使用Fleur / Redux (redux-thunk).

提供了 Next.js 子集 `useRouter`

```
yarn add @fleur/froute
```

-   [特征](https://npmcn.com/package/%40fleur/froute/#readme-features)
-   [API 概览](https://npmcn.com/package/%40fleur/froute/#readme-api-overview)
    -   [钩子](https://npmcn.com/package/%40fleur/froute/#readme-hooks)
    -   [构成部分](https://npmcn.com/package/%40fleur/froute/#readme-components)
-   [示例](https://npmcn.com/package/%40fleur/froute/#readme-example)
-   [Next.js 类似状态](https://npmcn.com/package/%40fleur/froute/#readme-nextjs-compat-status)
    -   [如何使用安全类型](https://npmcn.com/package/%40fleur/froute/#readme-how-to-type-safe-useroute)

## 特征

见所有实例 [此规格](https://github.com/fleur-js/froute/blob/master/src/index.spec.tsx) 或者说 [实例](https://github.com/fleur-js/froute/tree/master/examples)

-   独立图书馆
    -   与 Redux 和 Fleur 合作
-   下一个.js的路由器子集相容性(`useRouter`, (中文(简体) ), `withRouter`(中文(简体) )
-   支持没有代码变压器的动态导入
-   支持 Sever 侧面渲染
    -   支持预装
    -   `ResponseCode` 财务报告和审定财务报表 `Redirect` 组件
-   自定义路由分辨率( 用于 i18n 支持)
-   URL 构建器

## API 概览

### 钩子

-   `useRouter` - 说吧 **Next.js 子集相配钩**
    -   `withRouter` 可用
-   `useFrouteRouter` - 说吧 `useRouter` 超级集( 不兼容 Next.js ) `useRouter`(中文(简体) )
-   `useRouteComponent`
-   `useBeforeRouteChange(listener: () => Promise<boolean | void> | boolean | void)`
    -   它可以阻止路径返回 `Promise<false> | false`

折旧的APIs

以下通取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取出取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取出取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取出.. 这些特性可从下列网址获得: `useFrouteRouter`。 。 。 .

-   `useParams`
-   `useLocation`
-   `useNavigation`
-   `useUrlBuilder`

### 构成部分

-   `<Link href={string} />`
-   `<FrouteLink to={routeDef} params={object} query={object} />` - 安全路线
-   `<ResponseCode status={number} />`
-   `<Redirect url={string} status={number = 302}`

## 开始

路由定义 :

```tsx
export const routes = {
  index: routeOf('/').action({
    component: () => import('./pages/index'),
  }),
  user: routeOf('/users/:userId').action({
    component: () => import('./pages/user'),
    preload: (store: Store, params /* => inferred to { userId: string } */) =>
      Promise.all([ store.dispatch(fetchUser(param.userId)) ]),
  })
}
```

应用 :

```tsx
import { useRouteComponent, ResponseCode } from '@fleur/froute'

export const App = () => {
  const { PageComponent } = useRouteComponent()

  return (
    <div>
      {PageComponent ? (
        <PageComponent /> 
      ) : (
        <ResponseCode status={404}>
          <NotFound />
        </ResponseCode>
      )}
    </div>
  )
}
```

用户. tsx :

```tsx
import { useRouter, buildPath } from '@fleur/froute'
import { routes, ResponseCode, Redirect } from './routes'

export default () => {
  const { query: { userId } } = useRouter()
  const user = useSelector(getUser(userId))

  if (!user) {
    return (
      <ResponseCode status={404}>
        <NotFound />
      </ResponseCode>
    )
  }

  if (user.suspended) {
    return (
      <Redirect status={301} url='/'>
        This account is suspended.
      </Redirect>
    )
  }
  
  return (
    <div>
      Hello, {user.name}!
      <br />
      <Link href={buildPath(routes.user, { userId: '2' })}>
        Show latest update friend
      </Link>
    </div>
  )
}
```

服务器侧 :

```tsx
import { createRouter } from '@fleur/froute'
import { routes } from './routes'

server.get("*", async (req, res, next) => {
  const router = createRouter(routes, {
    preloadContext: store
  })

  await router.navigate(req.url)
  await context.preloadCurrent();

  const content = ReactDOM.renderToString(
    <FrouteContext router={router}>
      <App />
    </FrouteContext>
  )

  // Handling redirect
  if (router.redirectTo) {
    res.redirect(router.statusCode, router.redirectTo)
  } else{
    res.status(router.statusCode)
  }
  
  const stream = ReactDOM.renderToNodeStream(
    <Html>
      {content}
    </Html>
  ).pipe(res)

  router.dispose()
})
```

客户端 :

```tsx
import { createRouter, FrouteContext } from '@fleur/froute'

domready(async () => {
  const router = createRouter(routes, {
    preloadContext: store,
  });

  await router.navigate(location.href)
  await router.preloadCurrent({ onlyComponentPreload: true })

  ReactDOM.render((
      <FrouteContext router={router}>
        <App />
      </FrouteContext>
    ),
    document.getElementById('root')
  )
})
```

## Next.js 类似状态

-   通过兼容 API `useRouter` 或者说 `withRouter`
    -   兼容特性
        -   `query`, (中文(简体) ), `push()`, (中文(简体) ), `replace()`, (中文(简体) ), `prefetch()`, (中文(简体) ), `back()`, (中文(简体) ), `reload()`
        -   `pathname` ,但 Froute 的路径名没有调整到文件系统路由.
    -   从 Next.js 中未提供的任何类型检查( Froute 已提供,属于相容断开)
-   Next.j 不支持的特定函数喜欢 `asPath`, (中文(简体) ), `isFallback`, (中文(简体) ), `basePath`, (中文(简体) ), `locale`, (中文(简体) ), `locales` 财务报告和审定财务报表 `defaultLocale`
    -   `<Link />` 只有href道具兼容 但行为不兼容.
        -   Froute的链接有 `<a />` 键。 下一个J不是.
        -   `as`, (中文(简体) ), `passHref`, (中文(简体) ), `prefetch`, (中文(简体) ), `replace`, (中文(简体) ), `scroll`, (中文(简体) ), `shallow` 目前不支持.
    -   `pathname` 返回当前 `location.pathname`,不调整到组件文件路径基础路径名.
    -   `router.push()`, (中文(简体) ), `router.replace()`
        -   網址 对象不支持当前
        -   `as` 不支持参数
    -   `router.beforePopState` 不支持
        -   使用 `useBeforeRouteChange()` 换钩子
    -   `router.events`
        -   部分支持: `routeChangeStart`, (中文(简体) ), `routeChangeComplete`, (中文(简体) ), `routeChangeError`
            -   仅 `url` 或者说 `err` 参数.
            -   未执行 : `err.cancelled` 财务报告和审定财务报表 `{ shallow }` 旗帜.
        -   未执行 : `beforeHistoryChange`, (中文(简体) ), `hashChangeStart`, (中文(简体) ), `hashChangeComplete`

### 为什么Frooute提供Next.js相配钩?

它旨在从反应-路由器或其他路由器迁移到Next.js.

弗劳特的 `useRouter` 旨在提供 `useRouter` 与 Next.js 部分兼容 `useRouter`,从而保证将现有的基于React Router的应用程序迁移到Next.js的中间步骤.

### 如何使用安全类型

在您的应用程序中使用此片段 . (正在从 Next.js 突破到 Type- Level API 兼容性)

```tsx
// Copy it in-your-app/useRouter.ts
import { useRouter as useNextCompatRouter } from '@fleur/froute'
export const useRouter: UseRouter = useNextCompatRouter
```

用法 :

```tsx
// Route definition
const routes = {
  users: routeOf('/users/:id'),
}

// Typeing to `Routes`, it's free from circular dependency
export type Routes = typeof routes

// Component
import { useRouter } from './useRouter'
import { Routes } from './your-routes'

const Users = () => {
  const router = useRouter<typeof Routes['users']>()
  router.query.id // It infering to `string`.
}
```

## 常见问题

### @fleur/froute 是什么？

React 安全而灵活的路由器

### 如何安装 @fleur/froute？

在项目目录运行 npm install @fleur/froute，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>= 16\.8\.x）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @fleur/froute 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @fleur/froute 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @fleur/froute 可以商用吗？

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

### @fleur/froute 的下载量有多少？

根据 npm 官方下载统计，@fleur/froute 在 2026/10/15 – 2026/11/13 这 30 天内被下载 2,179 次，日均约 73 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @fleur/froute 还在维护吗？

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