react-router实战Hooks之useParams

crayon-shin-chan

于 2021-02-12 12:17:27 发布

阅读量1.3w

点赞数 1

分类专栏： surprise react # react-router-dom 文章标签： react

本文链接：https://blog.csdn.net/qq_27868061/article/details/113794272

版权

surprise 同时被 3 个专栏收录

932 篇文章 ¥99.90 ¥299.90

订阅专栏

超级会员免费看

react

50 篇文章

订阅专栏

react-router-dom

24 篇文章

订阅专栏

本文介绍了React Router中的useParams Hook，用于获取URL参数。通过实例展示了如何从当前路径中提取键值对，方便在组件中使用。

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

1.简介

useParams返回URL参数的键/值对的对象。使用它来访问当前<Route>的match.params。

2.实例

function Home() {
    let { path } = useParams<any>();
  return <h2>Path {path}</h2>;
}
 

function App() {
  return (
    <div style={{ 
        width: '400px',
        margin: '20px auto'
    }}>
        <Router>
            <Switch>
                <Route path="/:path">
                    <Home></Home>
                </Route>
            </Switch>
        </Router>
    </div>
  );
}