react如何获取路由参数
在React中获取路由参数的方法取决于使用的路由库（如React Router v5/v6）。以下是常见场景的具体实现方式：
使用React Router v5获取路由参数
通过useParams钩子或props.match.params获取动态路由参数：
import { useParams } from 'react-router-dom';
// 函数组件写法
function UserProfile() {
const { userId } = useParams(); // 假设路由为 /users/:userId
return <div>User ID: {userId}</div>;
}
// 类组件写法
class UserProfile extends React.Component {
render() {
const { userId } = this.props.match.params;
return <div>User ID: {userId}</div>;
}
}使用React Router v6获取路由参数
v6版本统一使用useParams钩子：
import { useParams } from 'react-router-dom';
function ProductDetail() {
const { productId } = useParams(); // 路由路径需定义为 /products/:productId
return <div>Product ID: {productId}</div>;
}获取查询参数（URLSearchParams）
通过useLocation获取查询字符串并解析：
import { useLocation } from 'react-router-dom';
function SearchResults() {
const location = useLocation();
const queryParams = new URLSearchParams(location.search);
const keyword = queryParams.get('q'); // 处理类似 ?q=react 的查询参数
return <div>Search Keyword: {keyword}</div>;
}注意事项
- 路由定义需包含参数占位符（如
:id） - v6版本不再支持类组件的
match属性 - 查询参数需手动处理，推荐使用URLSearchParams API
