当前位置：首页 > React

基于react框架页面如何传递参数

2026-01-26 03:33:24React

路由传参（React Router）

在React Router中，可以通过useParams或useSearchParams传递参数。URL路径参数适用于固定结构的参数，查询参数适用于可选或动态参数。

安装React Router：

npm install react-router-dom

路径参数示例：

// 路由配置
<Route path="/user/:id" element={<UserPage />} />

// 组件内获取
import { useParams } from 'react-router-dom';
function UserPage() {
  const { id } = useParams();
  return <div>User ID: {id}</div>;
}

查询参数示例：

// 跳转时传递
navigate(`/search?query=${term}`);

// 组件内获取
import { useSearchParams } from 'react-router-dom';
function SearchPage() {
  const [searchParams] = useSearchParams();
  const query = searchParams.get('query');
  return <div>Search: {query}</div>;
}

状态提升（父子组件）

父组件通过props向子组件传递参数，适用于有直接层级关系的组件。

父组件：

function Parent() {
  const [count, setCount] = useState(0);
  return <Child count={count} />;
}

子组件：

function Child({ count }) {
  return <div>Count: {count}</div>;
}

Context API跨组件传参

使用React的Context API实现跨层级组件传参，避免props逐层传递。

创建Context：

const UserContext = createContext();

function App() {
  const [user, setUser] = useState(null);
  return (
    <UserContext.Provider value={{ user, setUser }}>
      <ChildComponent />
    </UserContext.Provider>
  );
}

消费Context：

function ChildComponent() {
  const { user } = useContext(UserContext);
  return <div>User: {user?.name}</div>;
}

状态管理库（Redux/Zustand）

通过全局状态管理库传递参数，适合复杂应用的状态共享。

Redux示例：

// 定义slice
const userSlice = createSlice({
  name: 'user',
  initialState: { name: '' },
  reducers: {
    updateName: (state, action) => {
      state.name = action.payload;
    }
  }
});

// 组件中使用
function UserProfile() {
  const name = useSelector(state => state.user.name);
  const dispatch = useDispatch();
  return (
    <input 
      value={name}
      onChange={e => dispatch(updateName(e.target.value))}
    />
  );
}

Zustand示例：

// 创建store
const useStore = create(set => ({
  count: 0,
  increment: () => set(state => ({ count: state.count + 1 }))
}));

// 组件中使用
function Counter() {
  const { count, increment } = useStore();
  return <button onClick={increment}>{count}</button>;
}

事件总线（Event Emitter）

通过自定义事件实现任意组件间的通信，适合解耦的组件关系。

创建事件总线：

const events = new EventEmitter();

// 发布事件
function ComponentA() {
  const emitData = () => {
    events.emit('data', { value: 123 });
  };
  return <button onClick={emitData}>Send</button>;
}

// 订阅事件
function ComponentB() {
  const [data, setData] = useState(null);
  useEffect(() => {
    events.on('data', setData);
    return () => events.off('data', setData);
  }, []);
  return <div>Received: {data?.value}</div>;
}

URL传参（非路由场景）

通过window.location或URLSearchParams处理非路由场景的URL参数。

设置URL参数：

function updateQueryParam(key, value) {
  const params = new URLSearchParams(window.location.search);
  params.set(key, value);
  window.history.pushState({}, '', `?${params.toString()}`);
}

读取URL参数：

function getQueryParam(key) {
  const params = new URLSearchParams(window.location.search);
  return params.get(key);
}

浏览器存储

利用localStorage或sessionStorage实现参数持久化。

存储数据：

localStorage.setItem('theme', 'dark');

读取数据：

const theme = localStorage.getItem('theme');

组合式传参

复杂场景可以组合多种传参方式，例如路由参数+Context API：

基于react框架页面如何传递参数

function App() {
  const { id } = useParams();
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetchUser(id).then(setUser);
  }, [id]);

  return (
    <UserContext.Provider value={user}>
      <UserProfile />
    </UserContext.Provider>
  );
}