react router 取出路由参数
时间: 2023-09-18 11:04:32 浏览: 61
React Router是一个用于在React应用中进行路由控制的库。在React Router中,可以使用一些方法来取出路由参数。
一种常见的方法是通过使用`useParams`钩子函数来获取路由参数。`useParams`是React Router提供的一个自定义钩子函数,用于从URL中提取参数。可以在函数组件中使用它。例如,假设有一个路由路径为`/users/:id`,其中`:id`是一个参数,可以通过以下方式使用`useParams`来获取该参数:
```javascript
import { useParams } from 'react-router-dom';
function User() {
const { id } = useParams();
return (
<div>
User ID: {id}
</div>
);
}
```
在上述代码中,`useParams`返回一个包含所有路由参数的对象。在这个例子中,我们可以通过`id`属性来访问`/users/:id`路径中的参数。
还可以通过使用`withRouter`高阶组件来获取路由参数。`withRouter`是一个高阶组件,用于将路由相关的属性传递给包装的组件。例如,可以将路由参数作为属性传递给包装的组件:
```javascript
import { withRouter } from 'react-router';
function User(props) {
const { id } = props.match.params;
return (
<div>
User ID: {id}
</div>
);
}
export default withRouter(User);
```
在上述代码中,`props.match.params`对象包含了所有的路由参数。在这个例子中,可以通过`props.match.params.id`来访问`/users/:id`路径中的参数。
这些是两种常见的方法来取出React Router中的路由参数。可以根据具体的情况选择使用哪种方法。