react如何从params
从 URL 参数获取数据的方法
在 React 中，可以通过 react-router-dom 提供的钩子或组件来获取 URL 参数。以下是几种常见方法：
使用 useParams 钩子（函数组件）
import { useParams } from 'react-router-dom';
function UserProfile() {
const { id } = useParams(); // 假设路由路径为 "/users/:id"
return <div>User ID: {id}</div>;
}类组件中使用 withRouter
import { withRouter } from 'react-router-dom';
class UserProfile extends React.Component {
render() {
const { id } = this.props.match.params;
return <div>User ID: {id}</div>;
}
}
export default withRouter(UserProfile);动态路由配置示例
在路由定义中需使用冒号语法声明参数：
<Route path="/users/:userId" component={UserProfile} />
// 或
<Route path="/posts/:postId/edit" render={() => <EditPost />} />查询参数处理
若需获取 ?key=value 形式的查询参数：
import { useLocation } from 'react-router-dom';
function SearchResults() {
const location = useLocation();
const queryParams = new URLSearchParams(location.search);
const query = queryParams.get('q');
return <div>Search Query: {query}</div>;
}TypeScript 类型支持
为参数添加类型定义：
type ParamsType = {
id: string;
};
function Component() {
const { id } = useParams<ParamsType>();
return <div>{id}</div>;
}注意事项
- 组件需在
<Router>上下文内才能使用路由相关钩子 - 参数总是以字符串形式返回，数字类型需手动转换
- 嵌套路由时参数会合并，同名参数会被覆盖
