react如何获取路由参数
获取路由参数的方法
在React中获取路由参数通常依赖于所使用的路由库。以下是几种常见路由库的获取方式：
React Router v5/v6
对于React Router v5和v6版本，可以通过useParams钩子获取动态路由参数：
import { useParams } from 'react-router-dom';
function UserProfile() {
const params = useParams();
// 假设路由定义为 /users/:id
const userId = params.id;
return <div>User ID: {userId}</div>;
}对于类组件，可以使用withRouter高阶组件（仅v5支持）：
import { withRouter } from 'react-router-dom';
class UserProfile extends React.Component {
render() {
const { params } = this.props.match;
return <div>User ID: {params.id}</div>;
}
}
export default withRouter(UserProfile);查询参数处理
获取URL查询参数可以使用useLocation和URLSearchParams：
import { useLocation } from 'react-router-dom';
function SearchPage() {
const location = useLocation();
const queryParams = new URLSearchParams(location.search);
const searchTerm = queryParams.get('q');
return <div>Search term: {searchTerm}</div>;
}React Router v4及更早版本
老版本使用match对象获取参数：
function UserProfile({ match }) {
return <div>User ID: {match.params.id}</div>;
}
// 路由配置
<Route path="/users/:id" component={UserProfile} />其他路由库
对于如Reach Router等其他库，参数获取方式类似：
import { useParams } from '@reach/router';
function Product() {
const params = useParams();
return <div>Product ID: {params.productId}</div>;
}注意事项
- 动态参数需在路由路径中明确定义（如
:id） - 查询参数（?key=value）需要单独解析
- 类组件在v6中不再支持
withRouter，需改用函数组件或自定义包装 - 确保组件实际被路由渲染（不是直接引用）才能获取参数
以上方法覆盖了React应用中获取路由参数的主要场景，根据项目使用的路由库版本选择对应方案即可。
