react 路由携带参数
在React中,路由携带参数主要有两种方式:
1. 使用`react-router-dom`库:
`react-router-dom`是React中常用的路由库之一。在配置路由时,可以通过`match.params`对象获取路由参数。以下是一个简单的示例:
首先,安装`react-router-dom`:
```bash
npm install react-router-dom
```
然后,在组件中获取路由参数:
```javascript
import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
function App() {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/users/1">用户1</Link>
</li>
<li>
<Link to="/users/2">用户2</Link>
</li>
</ul>
</nav>
<Route path="/users/:id" component={User} />
</div>
</Router>
react router v6 文档 );
}
function User({ match }) {
const userId = match.params.id;
return (
<div>
<h2>用户ID:{userId}</h2>
</div>
);
}
export default App;
发表评论