react如何拿到路由参数
获取路由参数的方法
在React中获取路由参数通常依赖于所使用的路由库。以下是两种常见路由库的获取方式：
使用React Router v5及以下版本
通过props.match.params获取动态路由参数：
import { Route } from 'react-router-dom';
function UserPage(props) {
const { id } = props.match.params; // 获取如/user/:id中的id
return <div>User ID: {id}</div>;
}
<Route path="/user/:id" component={UserPage} />通过useParams钩子（函数组件）：
import { useParams } from 'react-router-dom';
function UserPage() {
const { id } = useParams();
return <div>User ID: {id}</div>;
}使用React Router v6
v6版本中useParams是主要API：
import { useParams } from 'react-router-dom';
function ProductPage() {
const { productId } = useParams(); // 匹配路由如/product/:productId
return <div>Product ID: {productId}</div>;
}获取查询参数（URLSearchParams）
通过useLocation获取查询字符串：
import { useLocation } from 'react-router-dom';
function SearchPage() {
const location = useLocation();
const queryParams = new URLSearchParams(location.search);
const keyword = queryParams.get('q');
return <div>Search Keyword: {keyword}</div>;
}类组件中获取参数
对于类组件，可通过withRouter高阶组件：
import { withRouter } from 'react-router-dom';
class ProfilePage extends React.Component {
render() {
const { username } = this.props.match.params;
return <div>Username: {username}</div>;
}
}
export default withRouter(ProfilePage);注意事项
- React Router v6不再支持
withRouter，推荐使用函数组件+钩子的写法 - 动态路由参数需要在路由配置中定义，如
path="/post/:postId" - 查询参数（?key=value）需要通过URLSearchParams解析
