react如何拿到路由参数
获取路由参数的方法
在React中获取路由参数通常依赖于所使用的路由库。以下是两种常见路由库（React Router v5/v6）的解决方案：
使用React Router v5
React Router v5通过props.match.params或useParams钩子获取动态路由参数。
类组件方式：
import { withRouter } from 'react-router-dom';
class UserPage extends React.Component {
render() {
const { id } = this.props.match.params; // 获取如 /user/:id 的参数
return <div>User ID: {id}</div>;
}
}
export default withRouter(UserPage);函数组件方式（钩子）：
import { useParams } from 'react-router-dom';
function UserPage() {
const { id } = useParams(); // 直接解构参数
return <div>User ID: {id}</div>;
}使用React Router v6
React Router v6仅支持钩子方式，通过useParams获取参数：
import { useParams } from 'react-router-dom';
function ProductPage() {
const { productId } = useParams(); // 匹配路由如 /products/:productId
return <div>Product ID: {productId}</div>;
}查询参数处理
若需获取URL中的查询参数（如?name=value），可使用useLocation和URLSearchParams：
import { useLocation } from 'react-router-dom';
function SearchPage() {
const location = useLocation();
const queryParams = new URLSearchParams(location.search);
const keyword = queryParams.get('keyword'); // 获取 ?keyword=xxx
return <div>Search Keyword: {keyword}</div>;
}注意事项
- 动态路由需正确定义：确保路由配置中包含参数占位符（如
path="/user/:id"）。 - 钩子仅限函数组件：类组件需使用
withRouter（v5）或转换为函数组件。 - v6变更：React Router v6移除了
withRouter，推荐全面使用钩子。
