React18入门(第五篇)——React Router详细使用教程

概述

十分钟带你理解 React18项目如何在路由跳转时携带参数,如何获取路由地址中携带的参数。

文章目录

一、定义路由表

1.1 装包
bash 复制代码
npm install react-router-dom --save
1.2 定义路由文件
javascript 复制代码
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.1 跳转到某个地址
javascript 复制代码
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 路由返回
javascript 复制代码
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.1 解析动态路由参数

路由定义时,使用动态路由:

js 复制代码
{
  path: 'question',
  element: <QuestionLayout />,
  children: [
    {
      path: 'edit/:id',
      element: <Edit />,
    },
  ],
},

获取路由传参:

javascript 复制代码
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参数
javascript 复制代码
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
相关推荐
@小红花31 分钟前
从0到1学习Vue框架Day03
前端·javascript·vue.js·学习·ecmascript
前端与小赵34 分钟前
vue3中 ref() 和 reactive() 的区别
前端·javascript·vue.js
魔云连洲1 小时前
Vue的响应式底层原理:Proxy vs defineProperty
前端·javascript·vue.js
专注VB编程开发20年1 小时前
CSS定义网格的列模板grid-template-columns什么意思,为什么要用这么复杂的单词
前端·css
IT_陈寒1 小时前
Redis性能提升50%的7个关键优化策略,90%开发者都不知道第5点!
前端·人工智能·后端
Hilaku1 小时前
深入URL和URLSearchParams:别再用正则表达式去折磨URL了
前端·javascript·代码规范
pubuzhixing1 小时前
Canvas 的性能卓越,用它解决一个棘手问题
前端
weixin_456904271 小时前
Vue.jsmain.js/request.js/user.js/store/index.js Vuex状态管理项目核心模块深度解析
前端·javascript·vue.js
伍哥的传说1 小时前
Vue 3.6 Alien Signals:让响应式性能飞跃式提升
前端·javascript·vue.js·vue性能优化·alien-signals·细粒度更新·vue 3.6新特性
永日456701 小时前
学习日记-HTML-day51-9.9
前端·学习·html