【React】打卡笔记，入门学习02：react-router

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• 前言
• 一、react-router的跳转
• • 1、Vue2
  • 2、React
• 二、react-router的获取参数
• • [1.params 例如：`/form/1`](#1.params 例如：/form/1)
  • [2.query 例如：form?id=1](#2.query 例如：form?id=1)
• 三、组件标签
• • [1. 跳转到其他页面](#1. 跳转到其他页面)
  • [2. 多链接接判断](#2. 多链接接判断)
• 四、其他
• • 路由配置
• 示例对比，以及参数相关
• • 场景1：列表页跳转到详情页
  • 场景2：带查询参数跳转
  • 场景3：获取当前路径
  • 场景4：监听路由变化

---

前言

提示：这里可以添加本文要记录的大概内容：

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、react-router的跳转

import { useNavigate } from 'react-router';

export default function GoodsList() {
  	const navigate = useNavigate();
	return (
		<Button onClick={() => navigate('/product/base-goods/form')}>新增商品</Button>
	)
}

分析对比

navigate就跟uniapp的那个push跳转一样

1、Vue2

// Vue 2
this.$router.push('/product/base-goods/form')
this.$router.replace('/product/base-goods/form')

// Vue 3 Composition API
import { useRouter } from 'vue-router'
const router = useRouter()
router.push('/product/base-goods/form')
router.replace('/product/base-goods/form')

2、React

// React Router
import { useNavigate } from 'react-router'
const navigate = useNavigate()
navigate('/product/base-goods/form')  // 类似 router.push()
navigate('/product/base-goods/form', { replace: true })  // 类似 router.replace()

二、react-router的获取参数

1.params 例如：/form/1

代码如下（示例）：

// Vue 2
this.$route.params.id

// Vue 3 Composition API
import { useRoute } from 'vue-router'
const route = useRoute()
route.params.id

//-------------------------------------

// React Router
import { useParams } from 'react-router'
const { id } = useParams()
// id 就是路由参数值

标准用法

import { useParams } from 'react-router';
import { Button } from '@/components/ui/button';

export default function BaseGoodsForm() {
  const { id } = useParams();
  const isEditMode = !!id; // 如果有id就是编辑模式，否则是新增模式

  return (
    <div>
      <div className="flex justify-between items-center mb-2.5">
        <h1 className="text-foreground text-xl font-bold">{isEditMode ? '编辑商品' : '添加商品'}</h1>
        <Button variant="outline">保存</Button>
      </div>
      <div className="grid grid-cols-12 gap-6">
        <div className="col-span-8">
         
        </div>
        <div className="col-span-4">{/* 右侧内容 - 占据4份 */}</div>
      </div>
    </div>
  );
}

2.query 例如：form?id=1

代码如下（示例）：

// Vue 2
this.$route.query.keyword

// Vue 3
import { useRoute } from 'vue-router'
const route = useRoute()
route.query.keyword

//-------------------------------------

// React Router
import { useSearchParams } from 'react-router'
const [searchParams, setSearchParams] = useSearchParams()
const keyword = searchParams.get('keyword')

三、组件标签

1. 跳转到其他页面

<!-- Vue 2/3 -->
<router-link to="/product/base-goods/form">新增商品</router-link>
<router-link :to="{ path: '/product/base-goods/form' }">新增商品</router-link>

//-------------------------------------

// React Router
import { Link } from 'react-router'
<Link to="/product/base-goods/form">新增商品</Link>

2. 多链接接判断

经常是多个链接，判断选中高亮，类似于menu菜单项

<!-- Vue 需要手动处理 -->
<router-link 
  to="/product/base-goods" 
  :class="{ active: $route.path === '/product/base-goods' }"
>
  商品
</router-link>

// React Router - 自动处理active状态
import { NavLink } from 'react-router'
<NavLink 
  to="/product/base-goods"
  className={({ isActive }) => isActive ? 'active' : ''}
>
  商品
</NavLink>

---

四、其他

// Vue 3
router.push('/product/base-goods/form')           // 跳转
router.push({ path: '/product/base-goods/form' }) // 对象形式
router.replace('/product/base-goods/form')         // 替换历史记录
router.back()                                      // 返回上一页
router.go(-1)                                      // 返回上一页

// React Router
navigate('/product/base-goods/form')                          // 跳转
navigate('/product/base-goods/form', { replace: true })       // 替换历史记录
navigate(-1)                                                   // 返回上一页
navigate(1)                                                    // 前进一页

路由配置

// Vue Router 路由配置
const routes = [
  {
    path: '/product/base-goods/form/:id?',  // 可选参数
    component: BaseGoodsForm,
    name: 'baseGoodsForm'
  }
]

// React Router 路由配置
route('base-goods/form/:id?', 'routes/product/base-goods-form.tsx', { 
  id: 'baseGoods/form' 
})

示例对比，以及参数相关

场景1：列表页跳转到详情页

// Vue 3
const goToDetail = (id: string) => {
  router.push(`/product/base-goods/form/${id}`)
}

// React Router
const goToDetail = (id: string) => {
  navigate(`/product/base-goods/form/${id}`)
}

场景2：带查询参数跳转

// Vue 3
router.push({
  path: '/product/base-goods',
  query: { page: 1, keyword: 'test' }
})

// React Router
navigate('/product/base-goods?page=1&keyword=test')
// 或者
navigate({
  pathname: '/product/base-goods',
  search: '?page=1&keyword=test'
})

场景3：获取当前路径

// Vue 3
import { useRoute } from 'vue-router'
const route = useRoute()
const currentPath = route.path

// React Router
import { useLocation } from 'react-router'
const location = useLocation()
const currentPath = location.pathname

场景4：监听路由变化

// Vue 3
watch(() => route.params.id, (newId) => {
  // 路由参数变化时执行
})

// React Router
useEffect(() => {
  // 当id变化时执行
}, [id])

Vue Router	React Router	说明
useRouter()	useNavigate()	获取导航函数
router.push()	navigate()	跳转
router.replace()	navigate(path, { replace: true })	替换历史
router.back()	navigate(-1)	返回
useRoute()	useParams() + useLocation()	获取路由信息
route.params.id	useParams().id	路由参数
route.query.keyword	useSearchParams().get('keyword')	查询参数