react如何实现页面传参
页面传参方式
在React中实现页面传参有多种方法，以下是常见的几种方式：
URL参数（动态路由）
通过路由配置传递参数，适用于需要分享或书签保存的场景。使用react-router-dom的useParams获取参数：
// 路由配置
<Route path="/user/:id" component={UserPage} />
// 目标组件中获取参数
import { useParams } from 'react-router-dom';
function UserPage() {
const { id } = useParams();
return <div>User ID: {id}</div>;
}查询参数（Query String）
通过URL的查询字符串传递参数，使用useLocation和URLSearchParams解析：
import { useLocation } from 'react-router-dom';
function SearchPage() {
const location = useLocation();
const query = new URLSearchParams(location.search);
const keyword = query.get('q');
return <div>Search Keyword: {keyword}</div>;
}状态管理（Context/Redux） 通过全局状态管理工具传递复杂对象，适用于跨多级组件通信：
// 创建Context
const UserContext = createContext();
// 父组件提供值
<UserContext.Provider value={{ user: { name: 'Alice' } }}>
<ChildComponent />
</UserContext.Provider>
// 子组件消费值
const { user } = useContext(UserContext);编程式导航传参
通过history.push或navigate传递state对象：
// 发送参数
navigate('/target', { state: { from: 'home' } });
// 接收参数
const location = useLocation();
const { from } = location.state;组件Props传参 直接通过组件属性传递，适用于父子组件通信：
// 父组件
<ChildComponent data={{ title: 'Example' }} />
// 子组件
function ChildComponent({ data }) {
return <div>{data.title}</div>;
}选择建议
- 简单参数优先使用URL参数或查询字符串
- 复杂对象考虑状态管理或编程式导航的state
- 敏感数据避免通过URL传递
- 需要持久化的参数应当体现在URL中
