react-router之useParams()

最新推荐文章于 2025-03-02 23:18:41 发布

ikun不解释

最新推荐文章于 2025-03-02 23:18:41 发布

阅读量5.1k

点赞数 1

分类专栏： react-router

本文链接：https://blog.csdn.net/qq_42309685/article/details/118680624

版权

react-router 专栏收录该内容

1 篇文章

订阅专栏

本文详细探讨了React Router中的useParams()钩子函数，如何在声明式路由配置中获取和使用路径参数，以实现动态路由。通过实例解析，帮助开发者更好地理解和运用这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

声明式路由配置路由参数

import React from 'react';
import { 
    BrowserRouter as Router,
    Switch,
    Route,
    Link,
    useParams
} from 'react-router-dom';

function Child() {
    let { id } = useParams();
    console.log('id', id)
    return (
        <div>ID: {id}</div>
    )
}

export default function redux() {
    return (
        <Router>
            <div>
                <h2>Accounts</h2>
                <ul>
                    <li>
                        <Link to="/aaa">aaa</Link>
                    </li>
                    <li>
                        <Link to="/bbb">bbb</Link>
                    </li>
                    <li>
                        <Link to="/ccc">ccc</Link>
                    </li>
                </ul>
                <Switch>
                    <Route path="/:id" children={<Child />} />
                </Switch>
            </div>
        </Router>
    )
}