import React from 'react'
import { useParams, useLocation, useMatch, useNavigate } from 'react-router-dom'
const STU_DATA = [
{
id: 1,
name: "刘备"
},
{
id: 2,
name: "关羽"
},
{
id: 3,
name: "张飞"
},
{
id: 4,
name: "小赵"
}
]
export default function Student() {
// 可以使用usePrams() 来获取参数
const { id } = useParams()
const location = useLocation() // 获取当前的地址信息
console.log("location", location)
const match = useMatch('/student/3') // 用来检查当前url是否匹配某个路由
// 如果路径匹配，则返回一个对象，不匹配返回null
console.log("match", match)
// useNavigate 获取一个用于跳转页面的函数
const nav = useNavigate()
console.log(nav)
const stu = STU_DATA.find(item => item.id === +id)
console.log(id)
const clickHandler = () => {
nav('/about') // 使用push,会产生历史记录
nav('/about', { replace: true }) // 使用呢replace
}
return (
<div>
<button onClick={clickHandler}>点我一下</button>
<h2>{id}---{stu.name}</h2>
</div>
)
}
