React18 入門 (パート 5) - React Router の使用に関する詳細なチュートリアル

概要

10 分もあれば、React18 プロジェクトがルーティング ジャンプ時にパラメーターをどのように伝達するか、またルーティング アドレスで伝達されるパラメーターを取得する方法を理解できます。

1. ルーティングテーブルを定義する

1.1 梱包

npm install react-router-dom --save

1.2 ルーティングファイルの定義

import React from 'react'
// 关键代码
import {
    
     createBrowserRouter } from 'react-router-dom'

// 引入组件，没啥好说的
import MainLayout from '../pages/layouts/MainLayout'
import ManageLayout from '../pages/layouts/ManageLayout'
import QuestionLayout from '../pages/layouts/QuestionLayout'
import Home from '../pages/Home'
import NotFond from '../pages/NotFound'
import List from '../pages/manage/List'
import Edit from '../pages/question/Edit'

// 写法与 Vue.js 类似
const router = createBrowserRouter([
  {
    
    
    path: '/',
    element: <MainLayout />,
    children: [
      {
    
    
        path: '/',
        element: <Home />,
      },
      {
    
    
        path: 'manage',
        element: <ManageLayout />,
        children: [
          {
    
    
            path: 'list',
            element: <List />,
          },
        ],
      },
      {
    
    
        path: '*', // 404 路由配置都写在最后，起到一个兜底的作用
        element: <NotFond />,
      },
    ],
  },
  {
    
    
    path: 'question',
    element: <QuestionLayout />,
    children: [
      {
    
    
        path: 'edit/:id',
        element: <Edit />,
      },
    ],
  },
])
export default router

2.ルートジャンプ

2.1 アドレスへジャンプ

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

const Home: FC = () => {
    
    
  const nav = useNavigate()
  // 点击登录
  function handleLogin() {
    
    
    /** 方式一：*/
    // nav('/login')  || nav('/login?a=10')
    
    /** 方式二：*/
    nav({
    
    
      pathname: '/login',
      search: 'b=20',
    })
  }
  return (
    <div>
       // 方式一：
      <button onClick={
    
    handleLogin}>登录</button>
       // 方式二：
      <Link to="/register?a=10">注册</Link>
    </div>
  )
}
export default Home

2.2 ルート復帰

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

const Login: FC = () => {
    
    
  const nav = useNavigate()
  return (
    <div>
      {
    
    /* nav(-1) -- 路由跳转后可以实现返回 */}
      <button onClick={
    
    () => nav(-1)}>返回</button>
    </div>
  )
}
export default Login

3. ルーティングパラメータの取得方法

3.1 動的ルーティングパラメータの解析

ルートを定義するときは、動的ルーティングを使用します。

{
    
    
  path: 'question',
  element: <QuestionLayout />,
  children: [
    {
    
    
      path: 'edit/:id',
      element: <Edit />,
    },
  ],
},

ルートパラメータを取得します。

import React, {
    
     FC } from 'react'
// 核心代码
import {
    
     useParams } from 'react-router-dom'

const Edit: FC = () => {
    
    
  // 拿到路由传参
  const {
    
     id = '' } = useParams()
  return (
    <div>
      <div>{
    
    id}</div>
    </div>
  )
}
export default Edit

3.2 URLパラメータの解析

import React, {
    
     FC, useState } from 'react'
// 核心代码
import {
    
     useSearchParams } from 'react-router-dom'

const List: FC = () => {
    
    
  // 核心代码
  const [searchParams] = useSearchParams()
  console.log('key word', searchParams.get('keyword'))
  return (
    <>
      ...其他代码
    </>
  )
}
export default List