Reagir notas de estudo - reagir ganchos do roteador v6

prefácio

Atualmente estou estudando react routere aprendi que existem grandes diferenças entre as versões v5 e v6. react router v6Este artigo combinará as alterações e novas adições na especificação do código-fontehooks

Ao ler este artigo, você entenderá:

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

Explicação detalhada

useHref

declare function useHref(to: To): string;

Função

useHrefO gancho retorna uma URL que pode ser usada para vincular a um determinado local, mesmo fora do roteador React.

O gancho useHref retorna uma URL que pode ser usada para vincular ao local fornecido, mesmo fora do React Router.

useHrefPasse uma string ou Toobjeto e retorne o caminho absoluto de uma URL. Você pode passar um caminho relativo, caminho absoluto ou objeto To no parâmetro.
react hooks v6O componente no Linkuso interno useHrefpara obter seu valor href

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

exemplo

Rota atual: /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;

Função

Retorna verdadeiro se o componente Routerfor renderizado no contexto do componente , falso caso contrário. useInRouterContextIsso é útil para extensões de terceiros que precisam saber se devem ser react routerrenderizadas em um contexto.

Os hooks useInRouterContext retornam true se o componente estiver sendo renderizado no contexto de um , false caso contrário. Isso pode ser útil para algumas extensões de terceiros que precisam saber se estão sendo renderizadas no contexto de um aplicativo React Router.

Determine se o componente atual está no componente Routercriado porContext

useLocation

declare function useLocation(): Location;

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

Função

Isso hookretorna o locationobjeto de rota atual.

Este gancho retorna o objeto de localização atual . Isso pode ser útil se você quiser executar algum efeito colateral sempre que o local atual for alterado.

useMatch

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

Função

Retorna dados de acesso para rotas no caminho fornecido em relação ao local atual.

Retorna dados de correspondência sobre uma rota no caminho fornecido em relação ao local atual.

react router v5in useRouteMatchfoi renomeado na versão v6 useMatch. O exemplo interno chama matchPatho método para corresponder um padrão de caminho de rota a um nome de caminho de URL e retorna informações sobre a correspondência. Retorna nulo se o padrão não corresponder ao nome de caminho fornecido.

useNavigate

declare function useNavigate(): NavigateFunction;

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

Função

O gancho useNavigate retorna uma função que permite navegar programaticamente, por exemplo, após enviar um formulário.

O gancho useNavigate retorna uma função que permite navegar programaticamente, por exemplo, após o envio de um formulário.

react router v5O componente obtido useHistoryna versão v6 foi renomeado useNavigate. grandes mudanças no uso

exemplo

Rota atual: /user/page2
Outra rota: /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";

Função

Esse gancho retorna o tipo de navegação atual ou como o usuário chegou à página atual; por meio de uma operação pop, push ou replace na pilha de histórico.

Este gancho retorna o tipo de navegação atual ou como o usuário chegou à página atual; por meio de uma ação pop, push ou replace na pilha de histórico.

Isso hooksé semelhante às propriedades do react router v5objeto passadas pelo componente no parâmetro e retorna o tipo de operação que está sendo acionada no momentohistoryactionnavigate

useOutlet

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

Função

Retorna os elementos das rotas secundárias da rota da rota atual. Isso é usado internamente hookpelo componente para renderizar rotas secundárias.Outlet

Retorna o elemento para a rota filha neste nível da hierarquia de rota. Este gancho é usado internamente porpara renderizar rotas secundárias.

useParams

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

Função

useParamsRetorna um objeto de pares chave/valor para parâmetros de URL. Use isso para acessar o Routearquivo match.params. Uma rota filha herda todos os parâmetros de sua rota pai.

O gancho useParams retorna um objeto de pares de chave/valor dos parâmetros dinâmicos da URL atual que foram correspondidos pelo . As rotas secundárias herdam todos os parâmetros de suas rotas primárias.

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;

Função

useSearchParamsString de consulta para ler e modificar a posição atual na URL. Assim useStatecomo , useSearchParamsretorna uma matriz contendo dois valores: 当前位置的搜索参数e 一个可用于更新它们的函数.

O gancho useSearchParams é usado para ler e modificar a string de consulta na URL para o local atual. Assim como o useStatehook do próprio React , useSearchParams retorna uma matriz de dois valores: os parâmetros de pesquisa do local atual e uma função que pode ser usada para atualizá-los.

useSearchParamsfunciona de forma semelhante a navigate, mas apenas para searchpartes do URL.

Nota: O segundo parâmetro de setSearchParams deve ser do mesmo tipo que o segundo parâmetro de navegar

useResolvedPath

declare function useResolvedPath(to: To): Path;

Função

Este gancho analisa o nome do caminho no objeto fornecido e o nome do caminho do local atual e retorna um objeto Path

Esse gancho resolve o nome do caminho do local no valor fornecido para o nome do caminho do local atual.

useRoutes

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

Função

useRoutesGanchos Routesão funcionalmente equivalentes a componentes, mas usam objetos JavaScript em vez de Routeelementos para definir suas rotas. Este objeto Routetem os mesmos atributos dos elementos, mas não requer JSX

O gancho useRoutes é o equivalente funcional de, mas usa objetos JavaScript em vez de elementos para definir suas rotas. Esses objetos têm as mesmas propriedades dos elementos normais , mas não requerem JSX.

Observação: o valor de retorno de useRoutes é um React Element que você pode usar para renderizar a árvore de rota ou nulo (quando a rota não corresponde)

documentos de referência

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