react动态路由如何取值
动态路由取值方法
在React中，使用动态路由时可以通过react-router-dom提供的钩子或组件来获取路由参数。以下是几种常见的方法：
使用useParams钩子（函数组件）
import { useParams } from 'react-router-dom';
function UserProfile() {
const { id } = useParams(); // 假设路由路径为 "/user/:id"
return <div>User ID: {id}</div>;
}类组件中通过props.match获取
class UserProfile extends React.Component {
render() {
const { id } = this.props.match.params;
return <div>User ID: {id}</div>;
}
}
// 需确保组件被Route组件渲染：<Route path="/user/:id" component={UserProfile} />使用useRouteMatch获取嵌套路由参数
import { useRouteMatch } from 'react-router-dom';
function ProjectDetails() {
const match = useRouteMatch("/projects/:projectId");
return <div>Project ID: {match.params.projectId}</div>;
}查询参数处理
若需获取URL中的查询参数（如?name=value），可使用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>;
}注意事项
- 动态路由参数需在路由定义中用冒号标记（如
:id） - 类组件需通过
withRouter高阶组件注入路由props（React Router v5及之前版本） - React Router v6移除了
withRouter，推荐使用钩子API
