ReactRouter6路由传值hooks

这篇文章距离上次修改已过435天，其中的内容可能已经有所变动。

在React Router 6中，我们可以使用useParams钩子来获取动态路由参数。这里是一个简单的例子：

假设我们有以下路由配置：




<Routes>
  <Route path="user/:userId" element={<User />} />
</Routes>

在User组件中，我们可以使用useParams来获取userId：




import { useParams } from 'react-router-dom';
 
function User() {
  const { userId } = useParams();
 
  return (
    <div>
      <h1>User ID: {userId}</h1>
      {/* 其他的用户界面元素 */}
    </div>
  );
}
 
export default User;

每当路由匹配到user/:userId时，User组件就会渲染，并且userId参数会被传递给User组件，你可以在组件内部使用这个参数。

ReactRouter6路由传值hooks

评论已关闭

推荐阅读