Os fundamentos do roteamento de reação estão chegando à versão avançada

1. Introdução ao roteamento React

ReactO roteamento é um conjunto de ferramentas para criar aplicativos de página única que permite a criação de experiências de usuário interativas que navegam pelas páginas ou entre os componentes. Você pode usar o roteamento para carregar componentes dinamicamente, passar o estado para outros componentes ou alterar URLs dinamicamente.

2. O conceito básico de roteamento do React Router

React Routeré uma biblioteca de roteamento de terceiros baseada em React que é útil ao criar aplicativos de página única (SPA). Ele fornece uma maneira declarativa de gerenciar URLs de aplicativos e facilita muito a navegação entre as páginas. É mais popular devido à sua melhor experiência de usuário e menos estresse no servidor. Para usar efetivamente uma única página para gerenciar as funções originais de várias páginas, o roteamento de front-end surgiu.
O papel do roteamento:
a função do roteamento front-end: permitir que os usuários naveguem de uma exibição (página) para outra exibição (página).
O roteamento front-end é um conjunto de regras de mapeamento. No React, é a correspondência entre URL caminhos e componentes
. Digamos, é configurar caminhos e componentes (pares)

Aqui estão React Routeralguns conceitos básicos:

2.1 Componentes de roteamento

• BrowserRouter
  BrowserRouter e HashRoutersão os dois componentes mais usados ​​na biblioteca React Router.
  BrowserRouterUse a API de histórico do HTML5 para permitir que os usuários visitem diferentes páginas no aplicativo
• HashRouter
  HashRouter usa o sinal # da URL para obter um efeito semelhante. Recomendado se você precisar oferecer suporte a navegadores mais antigos HashRouter.
• O componente Link
  Link é outro componente muito usado na biblioteca do React Router. Ele é usado para gerar links de âncora ao navegar entre os usuários, pode passar o caminho da URL para o roteador e impede o recarregamento da página.

2.2 Método de roteamento

React Routeré uma biblioteca de roteamento flexível que fornece uma variedade de métodos para manipular rotas, incluindo algumas propriedades comuns, como useParams useLocation useHistory useSearchParams useNavigate useRouter.

• useRouter
  useRouter é um gancho personalizado na biblioteca React Router que pode ser usado para obter objetos de roteador e navegação em componentes de função. Use useRouter para executar facilmente operações relacionadas a roteamento em componentes, como navegação manual ao processar envios de formulários, geração dinâmica de caminhos de roteamento no código e muito mais.

No código a seguir, primeiro usamos a função de gancho useRouter() para obter o roteador e o roteador do objeto de navegação e, em seguida, chamamos a função router.navigate() no evento submit do formulário para realizar a navegação manual. Este método é mais conveniente e flexível do que escrever diretamente um link de rótulo.

import React from 'react';
import {
    
     useRouter } from 'react-router-dom';

function MyComponent() {
    
    
  const router = useRouter();

  const handleSubmit = (event) => {
    
    
    // 处理表单提交逻辑
    router.navigate('/dashboard');
  }

  return (
    <form onSubmit={
    
    handleSubmit}>
      {
    
    /* 渲染表单 */}
      <button type="submit">提交</button>
    </form>
  );
}

export default MyComponent;

• useParams
  useParams é o método de aquisição de parâmetro de rota fornecido pelo React Router em React Hooks. Este método pode obter os parâmetros dinâmicos e parâmetros de consulta passados ​​na rota, encapsulá-los em um objeto e retorná-los.

No exemplo abaixo, obtemos o parâmetro de rota postId via useParams e o renderizamos no componente

import React from "react";
import {
    
     useParams } from "react-router-dom";

export default function Post() {
    
    
  const {
    
     postId } = useParams();
  return (
    <div>
      <h2>Post ID: {
    
    postId}</h2>
    </div>
  );
}

• useLocation
  useLocation é outra propriedade fornecida pelo React Router para obter as informações de localização da URL atual.
  Os atributos do local do parâmetro padrão da rota incluem: nome do caminho pathname, status hash, parâmetros de consulta searche status state.

Neste exemplo, usamos useLocation para obter o caminho de URL atual e renderizá-lo no componente.

import React from "react";
import {
    
     useLocation } from "react-router-dom";

export default function MyComponent() {
    
    
  const location = useLocation();
  return (
    <div>
      <h2>Current URL: {
    
    location.pathname}</h2>
    </div>
  );
}

• useHistory
  useHistory é usado para obter o objeto de histórico e seus métodos podem realizar salto de roteamento, retorno e outras operações.

Código de amostra

import React from 'react';
import {
    
     useHistory } from 'react-router-dom';

function Login() {
    
    
  const history = useHistory();

  function handleClick() {
    
    
    // 跳转到首页
    history.push('/');
  }

  return (
    <button onClick={
    
    handleClick}>登录</button>
  );
}

export default Login;

• useSearchParams
  useSearchParams é usado para obter os parâmetros de consulta da rota atual. Ele pode ser chamado em componentes de função para buscar dados de parâmetros de consulta de URL. Através desta função, podemos obter os parâmetros de consulta na URL no componente React, de forma a implementar convenientemente várias lógicas de página com base nos parâmetros de consulta.

No código a seguir, primeiro obtemos o objeto de localização da rota atual por meio da função de gancho useLocation(), depois usamos o URLSearchParamsconstrutor para criar um objeto de parâmetro de consulta e, em seguida, chamamos o método get() para obter o valor do parâmetro de consulta e armazene-o no meio da variável de consulta.

import React from 'react';
import {
    
     useLocation } from 'react-router-dom';

function SearchResults() {
    
    
  const location = useLocation();
  const searchParams = new URLSearchParams(location.search);
  const query = searchParams.get('q');

  // 使用查询参数进行搜索

  return (
    <>
      <h1>搜索结果</h1>
      <p>您搜索的关键字为：{
    
    query}</p>
      {
    
    /* 渲染搜索结果 */}
    </>
  );
}

export default SearchResults;

• useNavigate
  useNavigate é uma função Hook na biblioteca React Router, que permite a navegação programática em componentes de função. Em alguns cenários, a navegação programática é mais conveniente do que usar links, como pular para uma página especificada depois que um formulário é enviado com êxito ou pular para uma página com base em determinadas condições.

No código a seguir, primeiro usamos a função useNavigate() para obter o objeto de navegação navegue e, em seguida, chamamos a função navegar() para executar a navegação programática após o login bem-sucedido e pular para a página especificada. Use a função useNavigate() para facilitar a navegação programática, melhorando assim a experiência do usuário do aplicativo.

import React from 'react';
import {
    
     useNavigate } from 'react-router-dom';

function Login() {
    
    
  const navigate = useNavigate();

  const handleLogin = () => {
    
    
    //TODO: 登录逻辑
    navigate('/dashboard');
  }

  return (
    <form>
      {
    
    /* 渲染表单 */}
      <button type="submit" onClick={
    
    handleLogin}>登录</button>
    </form>
  );
}

export default Login;

2.3 Sub-roteamento e configuração de página 404

React RouterFornece uma maneira de organizar rotas aninhadas, chamadas de sub-rotas. As sub-rotas nos permitem organizar e gerenciar rotas aninhadas multicamadas de forma mais conveniente, melhorando a legibilidade e a capacidade de manutenção das rotas. As sub-rotas também podem ser usadas para implementar operações como aninhamento de layout ou reutilização de componentes.
useRoutesÉ um novo Hook adicionado pelo React Router v6.Usá-lo nos permite criar rotas aninhadas dentro do componente sem a necessidade de uma camada de configuração fora da rota do componente.

A sintaxe de uso do useRoutes é relativamente simples, você só precisa passar um objeto de configuração para ele, e então definir a rota nas propriedades do objeto. Aqui está um exemplo simples:
No código abaixo, primeiro inicializamos um conjunto de rotas usando useRoutes, que inclui várias rotas, como Home, About, Users, 404, etc. Dentre elas, as sub-rotas de Usuários são definidas no atributo filhos, e pode-se perceber que é muito simples de usar.

import {
    
     useRoutes } from "react-router-dom";

function App() {
    
    
  const routes = useRoutes([
    {
    
     path: "/", element: <Home /> },
    {
    
     path: "/about", element: <About /> },
    {
    
    
      path: "/users",
      element: <Users />,
      //子路由配置
      children: [
        {
    
     path: "/", element: <UsersList /> },
        {
    
     path: "/:id", element: <UserProfile /> },
      ],
    },
    //404页面 配置
    {
    
     path: "*", element: <NotFound /> },
  ]);

  return (
    <div className="App">
      {
    
    routes}
    </div>
  );
}

3. Processo de uso de roteamento

3.1 Instalar e configurar o React Router

npm install react-router-dom --save

3.2 Criar página

3.3 Configure o roteamento em src/router/index.jsx

// 路由配置
const routes = [
// element 节点方式引入
    {
    
     path: '/', element: <HomeView /> },
    {
    
     path: '/about', element: <AboutView /> }
]

3.4 Criar componente de roteamento src/router/index.jsx

// 使用useRoutes 创建视图
export default function RouterView() {
    
    
// 创建路由
const elem = useRoutes(routes);
// 返回路由视图
return elem;
}

3.5 Usar e alternar o roteamento src/App.jsx

Código completo do Router-index.js

import {
    
     useRoutes } from "react-router-dom";
// 导入页面文件
import HomeView from "@/views/HomeView";
// import AboutView from "../views/AboutView";
import ProductView from "@/views/ProductView";
import AdminView from "@/views/admin/AdminView";
import DashView from "@/views/admin/DashView";
import OrderList from "@/views/admin/OrderList";
import NoMatch from "@/views/NoMatch";
// 引入权限组件
import Private from "./Private";
// 引入加载组件
import LazyLoad from "./LazyLoad";
// 路由配置
const routes = [
    // element 节点方式引入
    {
    
     path: '/', element: <HomeView /> },
    {
    
     path: '/about', element: LazyLoad('AboutView') },
    {
    
     path: '/product/:id', element: <ProductView /> },
    // 配置子路由
    {
    
    
        path: '/admin', element: <Private><AdminView /></Private>,
        children: [
            {
    
     path: '', element: <DashView /> },
            {
    
     path: 'orderlist', element: <OrderList /> },
        ]
    },
    {
    
     path: '*', element: <NoMatch /> }
]
// 使用useRoutes 创建视图
export default function RouterView() {
    
    
    // 创建路由
    const elem = useRoutes(routes);
    // 返回路由视图
    return elem;
}

O acima é a introdução de roteamento básico do roteador react