Back to packageRELEASE DETAILS

0.0.4

npm

@0bipinnata0/router

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Published27 Aug 2024

Direct dependencies19

Transitive dependenciesNot calculated

README

Current package documentation

React Router 实现

路由的三种实现方式

本项目实现了三种不同的路由方式，每种方式都有其特定的使用场景：

BrowserRouter (location.pathname)
- 使用 HTML5 History API
- 通过监听 popstate 事件实现路由状态同步
- 使用 history.pushState 更新 URL
- 适合需要干净URL的现代Web应用
HashRouter (location.hash)
- 基于 URL hash 实现路由
- 通过修改 location.hash 触发路由变化
- 兼容性好，适合不支持 History API 的旧浏览器
MemoryRouter (localStorage)
- 使用 localStorage 存储路由状态
- 完全基于内存的路由实现
- 适合非浏览器环境或需要持久化路由状态的场景

核心实现原理

状态管理

状态初始化
- BrowserRouter: 使用 location.pathname
- HashRouter: 使用 location.hash
- MemoryRouter: 使用 localStorage 存储的路径
状态变更机制
- 采用发布订阅模式
- 通过 routeEmit 统一管理路由事件
- 各路由组件监听状态变化并更新UI

组件体系

路由容器组件
- BrowserRouter/HashRouter/MemoryRouter
- 负责路由状态的初始化和更新
- 提供路由上下文
Routes 组件
- 收集和管理 Route 子组件
- 监听路由变化并更新UI
- 实现路由匹配和渲染
Route 组件
- 定义路由路径和对应组件
- 支持嵌套路由
- 支持路由参数
Link 组件
- 提供声明式的路由导航
- 触发路由状态更新
Outlet 组件
- 渲染子路由内容
- 实现路由嵌套

路由匹配逻辑

路由校验
- 过滤非 Route 组件
- 支持权限控制
路径匹配
- 支持精确匹配和模式匹配
- 处理路由参数
- 支持通配符路由（404页面）

使用示例

<Router>
  <Link to="/">主页</Link>
  <Link to="/login">登录</Link>
  
  <Routes>
    <Route path="/login" element={<Login />} />
    <Route path="/" element={<Home />}>
      <Route path="course" element={<Course />}>
        <Route path=":id" element={<Detail />} />
      </Route>
    </Route>
  </Routes>
</Router>

API 参考

BrowserRouter: 基于 History API 的路由实现
HashRouter: 基于 URL hash 的路由实现
MemoryRouter: 基于 localStorage 的路由实现
Link: 路由导航组件
Route: 路由配置组件
Routes: 路由容器组件
Outlet: 子路由渲染组件
useParams: 获取路由参数 Hook
useNavigate: 编程式导航 Hook

Downloads & popularity

Awaiting observations

No metric observations yet

Download counts and popularity will appear here as the collector receives them.

Declared dependencies 19

Native requirements

19 direct targetsNot calculated transitive count

Package / target	Requirement	Relationship
ramda Environment { "local_name": "ramda", "alias": false, "peer_metadata": null }	`^0.30.1`	runtime
react Environment { "local_name": "react", "alias": false, "peer_metadata": null }	`^18.2.0`	runtime
react-dom Environment { "local_name": "react-dom", "alias": false, "peer_metadata": null }	`^18.2.0`	runtime
tsup Environment { "local_name": "tsup", "alias": false, "peer_metadata": null }	`^8.2.4`	development
vite Environment { "local_name": "vite", "alias": false, "peer_metadata": null }	`^5.0.0`	development
eslint Environment { "local_name": "eslint", "alias": false, "peer_metadata": null }	`^8.53.0`	development
zustand Environment { "local_name": "zustand", "alias": false, "peer_metadata": null }	`^4.5.2`	development
typescript Environment { "local_name": "typescript", "alias": false, "peer_metadata": null }	`^5.2.2`	development
@types/ramda Environment { "local_name": "@types/ramda", "alias": false, "peer_metadata": null }	`^0.30.1`	development
@types/react Environment { "local_name": "@types/react", "alias": false, "peer_metadata": null }	`^18.2.37`	development
@types/react-dom Environment { "local_name": "@types/react-dom", "alias": false, "peer_metadata": null }	`^18.2.15`	development
react-router-dom Environment { "local_name": "react-router-dom", "alias": false, "peer_metadata": null }	`^6.24.1`	development
@vitejs/plugin-react Environment { "local_name": "@vitejs/plugin-react", "alias": false, "peer_metadata": null }	`^4.2.0`	development
use-sync-external-store Environment { "local_name": "use-sync-external-store", "alias": false, "peer_metadata": null }	`^1.2.2`	development
@typescript-eslint/parser Environment { "local_name": "@typescript-eslint/parser", "alias": false, "peer_metadata": null }	`^6.10.0`	development
eslint-plugin-react-hooks Environment { "local_name": "eslint-plugin-react-hooks", "alias": false, "peer_metadata": null }	`^4.6.0`	development
eslint-plugin-react-refresh Environment { "local_name": "eslint-plugin-react-refresh", "alias": false, "peer_metadata": null }	`^0.4.4`	development
@types/use-sync-external-store Environment { "local_name": "@types/use-sync-external-store", "alias": false, "peer_metadata": null }	`^0.0.6`	development
@typescript-eslint/eslint-plugin Environment { "local_name": "@typescript-eslint/eslint-plugin", "alias": false, "peer_metadata": null }	`^6.10.0`	development

Distribution files

1 collected

Distribution 1

Source distribution

Source file

Checksums from source

{
  "shasum": "9744df6152abb413b6efcbf144952498e0bbac00",
  "tarball": "https://registry.npmjs.org/@0bipinnata0/router/-/router-0.0.4.tgz",
  "fileCount": 6,
  "integrity": "sha512-avixkeDODZX+hjhKY9iDGYAmwx80EH1EEyLiHhZ6FvFWYG8Etngfc6SQYWXSMY1a83BesuSBKJFlg7UO2xhpPw==",
  "signatures": [
    {
      "sig": "MEQCIFh+1Yd369GINWtuwpx39EauABFSiVqnx7QwVGiC7pjpAiA2UP6/dynMPY062+MkToYOsDATdS8rMOTKtsV64jBMkg==",
      "keyid": "SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"
    }
  ],
  "attestations": {
    "url": "https://registry.npmjs.org/-/npm/v1/attestations/@0bipinnata0%2frouter@0.0.4",
    "provenance": {
      "predicateType": "https://slsa.dev/provenance/v1"
    }
  },
  "unpackedSize": 11916
}