react 实现路由传参接参demo
时间: 2023-06-29 16:05:47 浏览: 46
下面是一个使用 React Router 实现路由传参和接收参数的示例:
首先,需要安装 `react-router-dom` 包:
```bash
npm install react-router-dom
```
然后,假设我们有两个页面,一个是 `Home` 页面,另一个是 `User` 页面,我们要在 `Home` 页面点击一个链接跳转到 `User` 页面,并传递一个名为 `userId` 的参数。代码如下:
```jsx
import React from 'react';
import { Link } from 'react-router-dom';
function Home() {
return (
<div>
<h1>Home Page</h1>
<Link to={`/user/123`}>Go to User Page</Link>
</div>
);
}
export default Home;
```
在这个例子中,我们使用 `Link` 组件来创建一个链接,它的 `to` 属性指定了跳转的路径,其中的 `/user/123` 表示跳转到 `User` 页面,并传递一个 `userId=123` 的参数。
接下来,我们需要在 `User` 页面接收这个参数。代码如下:
```jsx
import React from 'react';
import { useParams } from 'react-router-dom';
function User() {
const { userId } = useParams();
return (
<div>
<h1>User Page</h1>
<p>UserId: {userId}</p>
</div>
);
}
export default User;
```
在这个例子中,我们使用 `useParams` 钩子函数来获取路由参数。在函数内部,我们可以通过解构赋值的方式获取 `userId` 参数。
这样,我们就完成了一个简单的路由传参和接收参数的示例。