import React from 'react'
import { useParams, useLocation, useMatch, useNavigate } from 'react-router-dom'
const STU_DATA = [
? {
? ? id: 1,
? ? name: "劉備"
? },
? {
? ? id: 2,
? ? name: "關(guān)羽"
? },
? {
? ? id: 3,
? ? name: "張飛"
? },
? {
? ? id: 4,
? ? name: "小趙"
? }
]
export default function Student() {
? // ?可以使用usePrams() 來(lái)獲取參數(shù)
? const { id } = useParams()
? const location = useLocation() // 獲取當(dāng)前的地址信息
? console.log("location", location)
? const match = useMatch('/student/3') // 用來(lái)檢查當(dāng)前url是否匹配某個(gè)路由 ?
? // ?如果路徑匹配，則返回一個(gè)對(duì)象歌懒，不匹配返回null
? console.log("match", match)
? // ?useNavigate 獲取一個(gè)用于跳轉(zhuǎn)頁(yè)面的函數(shù)
? const nav = useNavigate()
? console.log(nav)
? const stu = STU_DATA.find(item => item.id === +id)
? console.log(id)
? const clickHandler = () => {
? ? nav('/about') // 使用push,會(huì)產(chǎn)生歷史記錄
? ? nav('/about', { replace: true }) ?// 使用呢replace
? }
? return (
? ? <div>
? ? ? <button onClick={clickHandler}>點(diǎn)我一下</button>
? ? ? <h2>{id}---{stu.name}</h2>
? ? </div>
? )
}
