react页面直接如何传参数
路由传参（React Router）
在React中，通过路由传递参数是最常见的方式。使用react-router-dom的useParams或useSearchParams可以轻松实现。
URL路径参数
配置路由时定义参数名，例如：
<Route path="/user/:id" element={<UserPage />} />在目标组件中获取：
import { useParams } from 'react-router-dom';
function UserPage() {
const { id } = useParams(); // 获取:id的值
return <div>User ID: {id}</div>;
}查询参数（Query String）
通过useSearchParams处理形如?key=value的参数：
import { useSearchParams } from 'react-router-dom';
function SearchPage() {
const [searchParams] = useSearchParams();
const keyword = searchParams.get('keyword'); // 获取?keyword=xxx
return <div>Search: {keyword}</div>;
}状态管理传参
通过状态管理工具（如Redux、Context API）共享参数，适合跨组件层级传递。
Context API示例
创建Context并传递值：
const UserContext = createContext();
function App() {
return (
<UserContext.Provider value={{ username: 'Alice' }}>
<ChildComponent />
</UserContext.Provider>
);
}子组件中消费：
function ChildComponent() {
const { username } = useContext(UserContext);
return <div>{username}</div>;
}Props逐层传递
父组件通过props向子组件传递参数，适用于简单层级关系。
function Parent() {
const data = { title: 'Hello' };
return <Child data={data} />;
}
function Child({ data }) {
return <h1>{data.title}</h1>;
}通过事件或回调传参
子组件通过回调函数将参数传递给父组件。
function Parent() {
const handleSubmit = (formData) => {
console.log(formData);
};
return <Child onSubmit={handleSubmit} />;
}
function Child({ onSubmit }) {
const data = { name: 'Bob' };
return <button onClick={() => onSubmit(data)}>Submit</button>;
}本地存储或Session传参
使用localStorage或sessionStorage临时存储参数，适合页面刷新后仍需保留数据的场景。
// 存储
localStorage.setItem('token', 'abc123');
// 获取
const token = localStorage.getItem('token');注意事项
- 路由传参适合页面跳转场景，但参数暴露在URL中。
- 状态管理适合复杂应用，避免props逐层传递的冗余。
- 本地存储需注意数据安全性，敏感信息应避免存储。
- 根据具体场景选择合适的方式，组合使用效果更佳。
