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

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

---

前言

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

---

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

一、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’)	查询参数