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之外。

The useHref hook returns a URL that may be used to link to the given to location, even outside of 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的上下文中渲染的第三方扩展非常有用。

The useInRouterContext hooks returns true if the component is being rendered in the context of a , false otherwise. This can be useful for some 3rd-party extensions that need to know if they are being rendered in the context of a React Router app.

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

useLocation

declare function useLocation(): Location;

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

功能

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

This hook returns the current location object. This can be useful if you’d like to perform some side effect whenever the current location changes.

useMatch

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

功能

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

Returns match data about a route at the given path relative to the current location.

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钩子返回一个函数，该函数允许您以编程方式进行导航，例如在提交表单之后。

The useNavigate hook returns a function that lets you navigate programmatically, for example after a form is submitted.

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操作。

This hook returns the current type of navigation or how the user came to the current page; either via a pop, push, or replace action on the history stack.

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

useOutlet

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

功能

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

Returns the element for the child route at this level of the route hierarchy. This hook is used internally by to render child routes.

useParams

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

功能

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

The useParams hook returns an object of key/value pairs of the dynamic params from the current URL that were matched by the . Child routes inherit all params from their parent routes.

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返回一个包含两个值的数组：当前位置的搜索参数和一个可用于更新它们的函数。

The useSearchParams hook is used to read and modify the query string in the URL for the current location. Like React’s own useStatehook, useSearchParams returns an array of two values: the current location’s search params and a function that may be used to update them.

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

注意：setSearchParams的第二个参数要与navigate的第二个参数的类型相同

useResolvedPath

declare function useResolvedPath(to: To): Path;

功能

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

This hook resolves the pathname of the location in the given to value against the pathname of the current location.

useRoutes

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

功能

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

The useRoutes hook is the functional equivalent of , but it uses JavaScript objects instead of elements to define your routes. These objects have the same properties as normal elements, but they don’t require JSX.

注意：useRoutes的返回值要么是一个可以让你用于渲染路由树的React Element，要么是null（路由不匹配时）

参考文档

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 官方文档