当前位置：首页 > React

react如何实现页面跳转值

2026-01-25 05:45:28React

使用 React Router 实现页面跳转传值

React 中实现页面跳转传值主要通过 react-router-dom 库完成。以下是几种常见方法：

通过 URL 参数传值

利用 useParams 或 useSearchParams 传递简单参数：

// 发送方组件
import { useNavigate } from 'react-router-dom';

function Sender() {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate('/receiver/123'); // 路径参数
    // 或 navigate('/receiver?id=123'); // 查询参数
  };

  return <button onClick={handleClick}>跳转</button>;
}

// 接收方组件（路径参数）
import { useParams } from 'react-router-dom';

function Receiver() {
  const { id } = useParams();
  return <div>接收到的ID: {id}</div>;
}

// 接收方组件（查询参数）
import { useSearchParams } from 'react-router-dom';

function Receiver() {
  const [searchParams] = useSearchParams();
  const id = searchParams.get('id');
  return <div>接收到的ID: {id}</div>;
}

通过 state 传值

使用 navigate 的第二个参数传递复杂对象：

// 发送方
function Sender() {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate('/receiver', {
      state: { 
        user: { name: 'John', age: 25 },
        timestamp: Date.now()
      }
    });
  };

  return <button onClick={handleClick}>跳转</button>;
}

// 接收方
import { useLocation } from 'react-router-dom';

function Receiver() {
  const location = useLocation();
  const { user, timestamp } = location.state || {};

  return (
    <div>
      用户信息: {user?.name}, {user?.age}
      <br />
      时间戳: {timestamp}
    </div>
  );
}

路由配置注意事项

确保路由配置正确匹配参数模式：

<Routes>
  <Route path="/receiver/:id" element={<Receiver />} />
  <Route path="/receiver" element={<Receiver />} />
</Routes>

类型安全传值（TypeScript）

为传递的值添加类型定义：

type RouteState = {
  user: {
    name: string;
    age: number;
  };
  timestamp: number;
};

// 发送方
navigate('/receiver', {
  state: {
    user: { name: 'John', age: 25 },
    timestamp: Date.now()
  } as RouteState
});

// 接收方
const location = useLocation();
const state = location.state as RouteState;

使用 Context 跨组件传值

对于需要深层传递或全局共享的数据：

react如何实现页面跳转值

const DataContext = createContext();

// 上层组件
<DataContext.Provider value={{ sharedData: 'value' }}>
  <App />
</DataContext.Provider>

// 任意子组件
const { sharedData } = useContext(DataContext);