基础

对于 react-router v6.4 以后的版本 这已经算一个新的版本了，在 react-router v6.4 之前，其核心主要是由 history 这个库提供全局唯一的导航对象 history和 当前路由的导航信息 location,但是在 6.4 之后其将其单独由 packages/router 包进行提供 history 有关的能力，同时也拓展了一个新的 DataAPI 的路由基础包 router

包

• react-router
  • 基础的路由管理方式的基座
    • Router
  • 路由管理组件类型
    • Outlet
    • Route
    • Routes
    • renderMatches
  • 一些数据管理
    • DataAPI 路由数据管理
      • DataRouterContext
      • DataRouterStateContext
    • 基础路由数据管理
      • LocationContext
      • NavigationContext
      • RouteContext
  • 公共的 Hooks
    • useRoutes
    • useMatches
    • useNavigate
    • useOutlet
    • ...
• react-router-dom 浏览器版本有关的门面库，对于这个包我们可以分为以下几种类型去学习
  • 基础的路由管理方式
    • BrowserRouter
    • HistoryRouter(不支持的方式)
    • HashRouter
  • DataAPI 方式生成路由
    • RouterProvider
    • createBrowserRouter
    • createHashRouter
  • 公共的 Hooks
    • useSearchParams
• react-router-native
• router
  • history.ts : 代替 history 这个库实现操作浏览器历史栈的方法，
    • 主要关注 createHashHistory , createBrowserHistory , createMemoryHistory三种路由模式基座的异同
    • 关注几个核心的工具方法 matchRoutes , flattenRoutes, matchRouteBranch
  • router.ts : 实现 DataAPI 功能的基座能力

参考

(React-Router v6 完全解读指南 - react-router )[https://juejin.cn/post/7065599937265795109#heading-6]

(React-Router v6 完全解读指南 - history)[https://juejin.cn/post/7065599937265795109]

(React-Router v6 完全解读指南 - react-router-dom / native 篇)[https://juejin.cn/post/7068101548584206350]

(React Router V6.4 基础知识（地基篇）)[https://juejin.cn/post/7180029716038942778] (React Router V6.4 （history 对象篇）)[https://juejin.cn/post/7180075043412508728] (React Router V6.4 （Router 对象篇）)[https://juejin.cn/post/7180425765966577701]

(4k 字介绍 React Router 6.4 超大变化：引入 Data API。你不纯粹了！)[https://cloud.tencent.com/developer/article/2246023]