react动态路由如何传参
React 动态路由传参方法
在 React 中，动态路由传参主要通过路由库（如 React Router）实现，以下是常见方法：
使用 useParams 钩子（React Router v5+）
在路由配置中定义参数占位符，通过 useParams 获取参数值：
// 路由配置
<Route path="/user/:id" component={User} />
// 组件内获取参数
import { useParams } from 'react-router-dom';
function User() {
const { id } = useParams();
return <div>User ID: {id}</div>;
}通过 useLocation 的 search 参数
适用于 URL 查询参数（?key=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>;
}通过 useNavigate 传递 state
导航时通过 state 传递对象参数（不会暴露在 URL 中）：
// 发送参数
import { useNavigate } from 'react-router-dom';
function Home() {
const navigate = useNavigate();
navigate('/profile', { state: { user: 'admin' } });
}
// 接收参数
import { useLocation } from 'react-router-dom';
function Profile() {
const { state } = useLocation();
return <div>User: {state.user}</div>;
}类组件中的参数获取
对于类组件，可以通过 this.props.match.params 获取：
class Product extends React.Component {
render() {
const { id } = this.props.match.params;
return <div>Product ID: {id}</div>;
}
}
// 路由配置
<Route path="/product/:id" component={Product} />注意事项
- React Router v6 移除了
withRouter，推荐使用钩子替代 - 查询参数 (
?key=value) 需要通过URLSearchParams手动解析 state传参在页面刷新后会丢失，适合临时数据传递
