3.路由跳转及路由参数获取

[haokur]

对应 commit 记录：9207e592b87359aed7e788a0521f90b7edc60d17
使用 git reset --hard 9207e59 回退到此版本

一、跳转方式

DetailPage，路由配置使用动态路由

const AppRoutes = () => {
    return (
        <Suspense fallback={<div></div>}>
            <Routes>
                <Route path="/user/detail/:id" element={<Auth element={<UserDetailPage />} />} />
            </Routes>
        </Suspense>
    );
};

1. 绑定方法的形式

import { useNavigate } from "react-router-dom"

const HomePage = function () {
    const navigate = useNavigate()

    const handleGoUserDetailPage = (user: IUser) => {
        let { id, age, name } = user
        navigate(`/user/detail/${id}?name=${name}&age=${age}`)
    }

    return (
        <div>
            <div className="user">
                <ul className="user-list">
                    {
                        userList.map(user => {
                            return <li key={user.id} className="user-item" onClick={() => handleGoUserDetailPage(user)}>{user.name}-{user.age}</li>
                        })
                    }
                </ul>
            </div>
        </div>
    )
}

2. 使用 Link 标签声明式跳转

<Link to={`/user/detail/${user.id}?name=${user.name}&age=${user.age}`}>{user.name}-{user.age}</Link>

3. a 链接

<a href={`?id=${user.id}#/user/detail/${user.id}?name=${user.name}&age=${user.age}`}>{user.name}-{user.age}</a>

二、接收参数

• query参数
• 动态路由参数
• hashQuery参数

使用自定义 hook，统一集中获取

• useQuery

import { useParams, useSearchParams } from "react-router-dom"

interface IQueryResult {
    [key: string]: string | undefined
}
type IQueryTuple<T, K, J> = [T, K, J];
export const useQuery = <T extends IQueryResult = IQueryResult, K extends IQueryResult = IQueryResult, J extends IQueryResult = IQueryResult>(): IQueryTuple<T, K, J> => {
    let params: T = useParams() as T

    const search = new URLSearchParams(location.search)
    let _searchObj: K = {} as K
    search.forEach((value, key) => Object.assign(_searchObj, { [key]: value }))

    const [searchParams] = useSearchParams();
    let _hashSearch: J = {} as J
    searchParams.forEach((value, key) => Object.assign(_hashSearch, { [key]: value }))

    return [params, _searchObj, _hashSearch]
}

• 使用

import { useQuery } from "../../hooks/query.hook"
const [query, params, hashQuery] = useQuery<{ id: string }, { id: string }, { name: string }>()

例如页面路径为：https://haokur.github.io/react-starter/?id=1#/user/detail/1?name=%E5%BC%A0%E4%B8%89&age=18
则 useQuery 获取的参数为 [{id:1},{id:1},{"name":"张三","age":"18"}]