react页面直接如何传参
通过URL传递参数
在React中可以通过URL的查询参数（query parameters）传递数据。使用react-router-dom的useLocation和useSearchParams钩子可以获取和设置URL参数。定义路由时无需特殊配置，参数会自动附加在URL末尾。
import { useSearchParams } from 'react-router-dom';
function MyComponent() {
const [searchParams, setSearchParams] = useSearchParams();
const id = searchParams.get('id');
const updateParams = () => {
setSearchParams({ id: '123', name: 'test' });
};
}通过路由参数传递
使用动态路由匹配参数，需在路由配置中定义占位符。例如path="/user/:id"，通过useParams钩子获取参数值。
import { useParams } from 'react-router-dom';
function UserPage() {
const { id } = useParams();
return <div>User ID: {id}</div>;
}
// 路由配置
<Route path="/user/:id" element={<UserPage />} />通过状态传递参数
使用useNavigate或Link组件的state属性传递复杂对象。接收方通过useLocation获取状态数据。
import { Link, useLocation } from 'react-router-dom';
// 发送参数
<Link to="/target" state={{ data: 'value' }}>跳转</Link>
// 接收参数
function TargetPage() {
const location = useLocation();
const { data } = location.state;
}通过Context跨组件传递
创建Context提供全局状态管理，适合深层嵌套组件或跨层级参数传递。
import { createContext, useContext } from 'react';
const ParamsContext = createContext();
function Parent() {
return (
<ParamsContext.Provider value={{ key: 'value' }}>
<Child />
</ParamsContext.Provider>
);
}
function Child() {
const params = useContext(ParamsContext);
return <div>{params.key}</div>;
}通过props逐层传递
父子组件间直接通过props传递参数，适用于简单层级关系。
function Parent() {
return <Child message="Hello" />;
}
function Child({ message }) {
return <div>{message}</div>;
}使用Redux或状态管理库
通过全局状态管理工具如Redux、MobX等共享参数，适合大型应用复杂状态交互。
import { useSelector } from 'react-redux';
function Component() {
const data = useSelector(state => state.data);
return <div>{data}</div>;
}通过window对象共享
将参数存储在window对象上实现全局访问，需注意避免命名冲突。
// 设置参数
window.sharedData = { key: 'value' };
// 获取参数
const data = window.sharedData;
