跳到主要内容

路由

大纲​

  • 路由
    • 出口&跳转
    • 类型
    • 配置
    • 动态路由
    • 路由布局
    • 传参
      • 动态路由传参
      • 查询字符串传参
      • match 对象
      • location 对象
    • 权限
      • 路由守卫
    • 其他
      • 路由数据加载
      • 工具函数

路由出口&跳转​

分类配置Hooks组件工具函数
出口-useOutlet()<Outlet>-
\--useOutletContext()--
跳转--<Link>-
\--useSelectedRoutes()<NavLink>-
\-historyWithQueryuseNavigate()<Navigate>-
\----history

路由类型​

分类配置Hooks组件工具函数
类型history:
{ type: 'browser' }		--createBrowserHistory()
\-history:
{ type: 'hash' }		--createHashHistory()
\-history:
{ type: 'memory'		--createMemoryHistory()

路由配置​

  • routes
    • path
    • component
    • routes
    • redirect
      • keepQuery
    • wrappers
    • layout
分类配置Hooks组件工具函数
配置routes---

动态路由配置​

分类配置Hooks组件工具函数
动态路由配置-useRoutes()--

动态路由​

约定，带 $ 前缀的目录或文件为动态路由。若 $ 后不指定参数名，则代表 * 通配。

路由布局​

路由传参​

路由动态参数​

  • params
分类配置Hooks组件工具函数
--useParams()--

查询字符串参数​

分类配置Hooks组件工具函数
--useSearchParams()--
----createSearchParams()

match 对象​

  • params
分类配置Hooks组件工具函数
--useMatch()--
----matchPath()
----matchRoutes()

location 对象​

分类配置Hooks组件工具函数
--useLocation()--

路由权限​

分类配置Hooks组件工具函数
守卫-useAccess()<Access>-

其他​

路由数据加载​

分类配置Hooks组件工具函数
--useClientLoaderData()--

工具函数​

分类配置Hooks组件工具函数
路径---generatePath()
--useResolvedPath()-resolvePath()
属性数据-useRouteProps()--
--useRouteData()--
--useAppData()--
-reactRouter5Compat-withRouter()-
SEO优化--<Helmet>-
调试---terminal