正文

掌握React路由传参技巧，轻松实现页面间数据传递与跳转

/0 浏览量
1026

在React开发中，路由的使用非常普遍，它可以帮助我们管理和切换不同的页面。而页面间的数据传递与跳转则是实现复杂业务逻辑的关键。本文将介绍几种常用的React路由传参技巧，帮助你轻松实现页面间数据传递与跳转。

一、通过URL传参

这是最简单也是最常用的传参方式。通过在URL中添加查询参数，可以在跳转时传递数据。

1. 使用history.push

import { useHistory } from 'react-router-dom';

const history = useHistory();

const jumpToDetail = (id) => {
  history.push(`/detail/${id}`);
};

2. 使用Link

import { Link } from 'react-router-dom';

function App() {
  return (
    <div>
      <Link to={`/detail/${id}`}>查看详情</Link>
    </div>
  );
}

二、通过状态管理传参

在React中，状态管理通常使用Redux、MobX等库来实现。通过在全局状态中保存数据，可以在不同组件间共享和传递。

1. 使用Redux

// action
const setDetailId = (id) => ({
  type: 'SET_DETAIL_ID',
  payload: id,
});

// reducer
const reducer = (state, action) => {
  switch (action.type) {
    case 'SET_DETAIL_ID':
      return { ...state, detailId: action.payload };
    default:
      return state;
  }
};

// component
const Detail = () => {
  const { detailId } = useSelector((state) => state);
  return <div>{`当前ID: ${detailId}`}</div>;
};

三、通过props传参

在组件间通过props进行数据传递是一种非常直观的方式。

1. 通过路由组件传递

import { useParams } from 'react-router-dom';

const Detail = () => {
  const { id } = useParams();
  return <div>{`当前ID: ${id}`}</div>;
};

2. 通过父组件传递

const Parent = () => {
  return (
    <div>
      <Child id={123} />
    </div>
  );
};

const Child = ({ id }) => {
  return <div>{`当前ID: ${id}`}</div>;
};

四、使用高阶组件（HOC）传参

通过将props传递给高阶组件，可以在不修改原有组件结构的情况下，实现参数传递。

const withParams = (Component) => {
  const EnhancedComponent = (props) => {
    const { id } = useParams();
    return <Component {...props} id={id} />;
  };
  EnhancedComponent.displayName = `WithParams(${Component.displayName || Component.name})`;
  return EnhancedComponent;
};

const Detail = ({ id }) => {
  return <div>{`当前ID: ${id}`}</div>;
};

export default withParams(Detail);

五、总结

通过以上五种方法，我们可以根据实际情况选择合适的传参方式。在实际开发中，还可以根据业务需求进行组合使用。熟练掌握这些技巧，将大大提高你的React开发效率。

-- 展开阅读全文 --