反応ルーティングの基本は、高度なバージョンに来ています

1. React ルーティングの概要

Reactルーティングは、ページ間またはコンポーネント間を移動するインタラクティブなユーザー エクスペリエンスの作成を可能にする単一ページ アプリケーションを構築するためのツールセットです。ルーティングを使用して、コンポーネントを動的にロードしたり、状態を他のコンポーネントに渡したり、URL を動的に変更したりできます。

2. React Router ルーティングの基本概念

React RouterReact に基づくサードパーティのルーティング ライブラリで、シングルページ アプリケーション (SPA) の構築に役立ちます。アプリケーション URL を管理するための宣言的な方法を提供し、ページ間のナビゲーションを非常に簡単にします。ユーザーエクスペリエンスが向上し、サーバーへのストレスが少ないため、より人気があります. 単一のページを効果的に使用して元の複数ページの機能を管理するために、フロントエンド ルーティングが登場しました。
ルーティングの役割:
フロントエンド ルーティングの機能: ユーザーが 1 つのビュー (ページ) から別のビュー (ページ) に移動できるようにする.
フロントエンド ルーティングは一連のマッピング ルールです. React では、URL 間の対応付けです.パスとコンポーネント
. たとえば、パスとコンポーネント (ペア) を構成することです。

以下にReact Routerいくつかの基本的な概念を示します。

2.1 ルーティング コンポーネント

• BrowserRouter
  BrowserRouterとHashRouterReact Router ライブラリで最も一般的に使用される 2 つのコンポーネントです。
  BrowserRouterHTML5 の履歴 API を使用して、ユーザーがアプリケーション内のさまざまなページにアクセスできるようにする
• HashRouter は、
  HashRouter URL の # 記号を使用して同様の効果を実現します。古いブラウザをサポートする必要がある場合にお勧めしますHashRouter。
• Link
  Linkコンポーネントは、React Router ライブラリでよく使用されるもう 1 つのコンポーネントです。ユーザー間を移動するときにアンカー リンクを生成するために使用され、URL パスをルーターに渡すことができ、ページのリロードを防ぎます。

2.2 ルーティング方法

React Routerなどの一般的なプロパティを含む、ルートを操作するためのさまざまなメソッドを提供する柔軟なルーティング ライブラリですuseParams useLocation useHistory useSearchParams useNavigate useRouter。

• useRouter
  useRouterは React Router ライブラリのカスタム フックで、関数コンポーネントでルーターとナビゲーション オブジェクトを取得するために使用できます。useRouter を使用して、フォーム送信を処理するときの手動ナビゲーション、コード内のルーティング パスの動的生成など、ルーティング関連の操作をコンポーネントで簡単に実行できます。

次のコードでは、最初に useRouter() フック関数を使用してルーターとナビゲーション オブジェクト ルーターを取得し、フォームの送信イベントで router.navigate() 関数を呼び出して手動ナビゲーションを実現します。この方法は、ラベル リンクを直接書き込むよりも便利で柔軟です。

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は React Hooks で React Router が提供するルートパラメータ取得メソッドです。このメソッドは、ルートで渡された動的パラメータとクエリ パラメータを取得し、それらをオブジェクトにカプセル化して返すことができます。

以下の例では、useParams を介してルート パラメーター postId を取得し、コンポーネントでレンダリングします。

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現在の URL の位置情報を取得するために React Router によって提供される別のプロパティです。
  ルートのデフォルト パラメータの場所の属性には、 path name pathname、 status hash、 query parameters search、および statusが含まれますstate。

この例では、useLocation を使用して現在の URL パスを取得し、コンポーネントでレンダリングします。

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履歴オブジェクトを取得するために使用され、そのメソッドはルーティングのジャンプ、リターンなどの操作を実現できます。

サンプルコード

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現在のルートのクエリ パラメータを取得するために使用されます。関数コンポーネントで呼び出して、URL クエリ パラメータからデータを取得できます。この関数を使用して、React コンポーネントの URL でクエリ パラメータを取得し、クエリ パラメータに基づいてさまざまなページ ロジックを便利に実装できます。

次のコードでは、最初に useLocation() フック関数を介して現在のルートの場所オブジェクトを取得し、コンストラクターを使用してURLSearchParamsクエリ パラメーター オブジェクトを作成し、get() メソッドを呼び出してクエリ パラメーターの値を取得します。クエリ変数の中央に格納します。

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は React Router ライブラリのフック関数で、関数コンポーネントでのプログラムによるナビゲーションを可能にします。シナリオによっては、フォームが正常に送信された後に指定されたページにジャンプしたり、特定の条件に基づいてページにジャンプしたりするなど、リンクを使用するよりもプログラムによるナビゲーションの方が便利です。

次のコードでは、最初に useNavigate() 関数を使用してナビゲーション オブジェクト ナビゲートを取得し、次に、navigate() 関数を呼び出して、ログインの成功後にプログラムによるナビゲーションを実行し、指定されたページにジャンプします。useNavigate() 関数を使用してプログラムによるナビゲーションを容易にし、アプリケーションのユーザー エクスペリエンスを向上させます。

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 サブルーティングと 404 ページ構成

React Routerサブルートと呼ばれるネストされたルートを編成する方法を提供します。サブルートを使用すると、多層のネストされたルートをより便利に整理および管理できるようになり、ルートの可読性と保守性が向上します。サブルートを使用して、レイアウトのネスティングやコンポーネントの再利用などの操作を実装することもできます。
useRoutesこれは、React Router v6 によって追加された新しいフックです。これを使用すると、コンポーネント ルートの外側の構成レイヤーを必要とせずに、コンポーネント内にネストされたルートを作成できます。

useRoutes を使用する構文は比較的単純です。設定オブジェクトを渡して、オブジェクトのプロパティでルートを定義するだけです。簡単な例を次に示します。
以下のコードでは、最初に useRoutes を使用して一連のルートを初期化します。これには、Home、About、Users、404 などの複数のルートが含まれます。このうち、ユーザーのサブルートは children 属性で定義されており、非常に使いやすいことがわかります。

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. 経路利用の流れ

3.1 React Router のインストールと設定

npm install react-router-dom --save

3.2 ページの作成

3.3 src/router/index.jsx でルーティングを構成する

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

3.4 ルーティング コンポーネントの作成 src/router/index.jsx

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

3.5 ルーティング src/App.jsx の使用と切り替え

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;
}

以上がreact-routerの基本的なルーティング紹介です