react如何从params
获取路由参数
在React中获取路由参数通常需要使用路由库提供的钩子或方法。以下是几种常见方法：
使用React Router v6
React Router v6版本推荐使用useParams钩子获取动态路由参数：
import { useParams } from 'react-router-dom';
function UserProfile() {
const params = useParams();
const { userId } = params; // 解构出特定参数
return <div>User ID: {userId}</div>;
}路由配置中需要定义参数名称：
<Route path="/users/:userId" element={<UserProfile />} />使用React Router v5
在v5版本中同样可以使用useParams，或通过组件的props获取：
// 钩子方式
function UserProfile() {
const { userId } = useParams();
return <div>User ID: {userId}</div>;
}
// props方式
function UserProfile({ match }) {
const { userId } = match.params;
return <div>User ID: {userId}</div>;
}获取查询参数
如需获取URL查询字符串（?key=value），可使用useSearchParams：
import { useSearchParams } from 'react-router-dom';
function SearchPage() {
const [searchParams] = useSearchParams();
const query = searchParams.get('q');
return <div>Search Query: {query}</div>;
}类组件中获取参数
在类组件中可通过withRouter高阶组件或直接访问props：
import { withRouter } from 'react-router-dom';
class UserProfile extends React.Component {
render() {
const { userId } = this.props.match.params;
return <div>User ID: {userId}</div>;
}
}
export default withRouter(UserProfile);注意事项
- 确保组件被路由组件包裹（在Router内部）
- 动态参数需在路由路径中用冒号声明（如
:id） - 查询参数不需要预先声明，可直接通过
URLSearchParams接口获取
