react如何获取路由传递参数
获取路由参数的常用方法
在React中获取路由传递的参数可以通过react-router-dom库实现。以下是几种常见的方式：
使用useParams钩子（React Router v5/v6推荐）
import { useParams } from 'react-router-dom';
function UserProfile() {
const { id } = useParams(); // 获取路径参数
return <div>User ID: {id}</div>;
}适用于动态路由如<Route path="/users/:id" />。
通过useLocation获取查询参数
import { useLocation } from 'react-router-dom';
function SearchPage() {
const location = useLocation();
const searchParams = new URLSearchParams(location.search);
const query = searchParams.get('q'); // 获取?q=xxx形式的参数
return <div>Search Query: {query}</div>;
}类组件中通过props.match获取（v5及之前版本）
class ProductDetail extends React.Component {
render() {
const { params } = this.props.match;
return <div>Product ID: {params.id}</div>;
}
}
// 需要配合withRouter高阶组件使用路由配置示例
对于动态路由需要预先定义参数占位符：
<Route path="/products/:id" element={<ProductDetail />} />注意事项
- React Router v6不再支持
withRouter，函数组件应优先使用钩子 - 查询参数需要手动解析
URLSearchParams对象 - 路径参数需在路由配置中用冒号声明（如
:id）
