如何获取路由中的参数js react
获取路由参数的方法（React）
在React中获取路由参数可以通过react-router-dom库实现。以下是几种常见方法：
使用useParams钩子（React Router v5/v6）
适用于函数组件，直接解构出路由参数：
import { useParams } from 'react-router-dom';
function UserProfile() {
const { id } = useParams(); // 假设路由为 /users/:id
return <div>User ID: {id}</div>;
}类组件中获取参数
对于类组件，可以通过props.match.params获取：
import { withRouter } from 'react-router-dom';
class ProductPage extends React.Component {
render() {
const { productId } = this.props.match.params;
return <div>Product ID: {productId}</div>;
}
}
export default withRouter(ProductPage);查询参数处理
获取URL中的查询字符串（如?name=value）：
import { useLocation } from 'react-router-dom';
function SearchPage() {
const location = useLocation();
const searchParams = new URLSearchParams(location.search);
const query = searchParams.get('q');
return <div>Search Query: {query}</div>;
}动态路由配置示例
需先在路由配置中定义参数：
<Route path="/posts/:postId" element={<PostDetail />} />注意事项
- React Router v6不再支持
withRouter高阶组件 - 嵌套路由中参数会继承父级路由的匹配结果
- 参数始终为字符串类型，需手动转换数字类型
以上方法覆盖了React应用中获取路由参数的常见场景，根据项目使用的React Router版本选择对应方案即可。
