0
点赞
收藏
分享

微信扫一扫

React 学习笔记 - react router v6 hooks

忍禁 2022-03-31 阅读 35

React 学习笔记 - react router v6 hooks

前言

目前正在学习react router,了解到v5和v6版本具有较大差异。本文将结合源代码详细说明react router v6中发生改变的以及新增的hooks

通过阅读本篇文章,你将了解:

  • useHref
  • useInRouterContext
  • useLocation
  • useMatch
  • useNavigate
  • useNavigationType
  • useOutlet
  • useParams
  • useSearchParams
  • useResolvedPath
  • useRoutes

详解

useHref

declare function useHref(to: To): string;

功能

useHref钩子返回一个URL,可以用来链接到给定的to位置,甚至在React router之外。

useHref传入一个字符串或To对象,返回一个URL的绝对路径。可以在参数中传入一个相对路径、绝对路径、To对象。
react hooks v6中的Link组件内部使用useHref获取它的href值

export interface Path {
  pathname: Pathname;
  search: Search;
  hash: Hash;
}
export type To = string | Partial<Path>;

示例

当前路由:/page1/page2

import React, {useEffect} from 'react';
import {useHref} from 'react-router-dom';

function Page2(props) {
    useEffect(()=>{
        console.log(useHref('../')) // 输出 '/page1/'
      	console.log(useHref('../../')) // 输出 '/'
        console.log(useHref('/page1')) // 输出 '/page'
        console.log(useHref('/pageabc')) // 输出 '/pageabc' 可见路径与当前路由无关
        console.log(useHref({pathname:'/page1',search:'name=123',hash:'test'})) // 输出 '/page1?name=123#test'
    },[])
    return (
        <div></div>
    );
}

export default Page2;

useInRouterContext

declare function useInRouterContext(): boolean;

功能

如果组件在Router组件中的上下文中渲染,useInRouterContext将返回true,否则返回false。这对于一些需要知道是否在react router的上下文中渲染的第三方扩展非常有用。

判断当前组件是否在由Router组件创建的Context

useLocation

declare function useLocation(): Location;

interface Location extends Path {
  state: unknown;
  key: Key;
}

功能

这个hook返回当前路由的location对象。

useMatch

declare function useMatch<ParamKey extends string = string>(
  pattern: PathPattern | string
): PathMatch<ParamKey> | null;

功能

返回给定路径上相对于当前位置的路由的匹配数据。

react router v5中的useRouteMatch在v6版本中更名为useMatch。内部示例调用了matchPath方法根据URL路径名匹配路由路径模式,并返回有关匹配的信息。如果模式与给定路径名不匹配,则返回null。

useNavigate

declare function useNavigate(): NavigateFunction;

interface NavigateFunction {
  (
    to: To,
    options?: { replace?: boolean; state?: any }
  ): void;
  (delta: number): void;
}

功能

useNavigate钩子返回一个函数,该函数允许您以编程方式进行导航,例如在提交表单之后。

react router v5中组件获取到的useHistory在v6版本更名为useNavigate。在用法上作出了较大改变

示例

当前路由:/user/page2
其他路由:/user/page1

import React, {useEffect} from 'react'
import {useNavigate} from 'react-router-dom'

function Page2(){
  let navigate = useNavigate()
  useEffect(()=>{
  	navigate('/user/page1') // 导航到'/user/page1'
    navigate('../') // 导航到'/user'
    navigate(-1) // 导航到/user/page1 相当于v5中history.go(-1) history.goBack()
    navigate(1) //导航到/user 相当于v5中history.go(1) history.goForward()
    navigate('/user/page2/',{replace:true,state:{name:123}} // 相当于v5中history.replace(),并同时传入state
  },[])
  return <div></div>
}

export default Page2

useNavigationType

declare function useNavigationType(): NavigationType;
type NavigationType = "POP" | "PUSH" | "REPLACE";

功能

这个钩子返回当前的导航类型或用户如何到达当前页面;通过历史堆栈上的pop、push或replace操作。

这个hooks类似react router v5中组件传入参数中的history对象的action属性,返回触发当前navigate的是何种操作

useOutlet

declare function useOutlet(): React.ReactElement | null;

功能

返回路由当前路由的子路由的元素。这个hookOutlet组件在内部使用用于渲染子路由。

useParams

declare function useParams<
  K extends string = string
>(): Readonly<Params<K>>;

功能

useParams返回URL参数的键/值对的对象。使用它来访问当前Routematch.params。子路由从其父路由继承所有参数。

useSearchParams

declare function useSearchParams(
  defaultInit?: URLSearchParamsInit
): [URLSearchParams, SetURLSearchParams];

type ParamKeyValuePair = [string, string];

type URLSearchParamsInit =
  | string
  | ParamKeyValuePair[]
  | Record<string, string | string[]>
  | URLSearchParams;

type SetURLSearchParams = (
  nextInit?: URLSearchParamsInit,
  navigateOpts?: : { replace?: boolean; state?: any }
) => void;

功能

useSearchParams用于读取和修改URL中当前位置的查询字符串。与useState一样,useSearchParams返回一个包含两个值的数组:当前位置的搜索参数一个可用于更新它们的函数

useSearchParams的工作原理与navigate类似,但仅适用于URL的search部分。

useResolvedPath

declare function useResolvedPath(to: To): Path;

功能

这个hook解析给定to对象中的pathname与当前位置的路径名,并返回一个Path对象

useRoutes

declare function useRoutes(
  routes: RouteObject[],
  location?: Partial<Location> | string;
): React.ReactElement | null;

功能

useRoutes钩子与Route组件是功能相等的,但它使用JavaScript对象而不是Route元素取定义你的路由。该对象与Route元素具有相同的属性,但是它们不需要JSX

参考文档

remix-run/react-router/packages/react-router/index.tsx
remix-run/react-router/packages/react-router-dom/index.tsx
remix-run/history/packages/history/index.ts
react router 官方文档

举报

相关推荐

0 条评论