正文

学会React Router传参跳转：轻松实现页面间数据传递技巧

/0 浏览量
1026

在React应用中，页面间的数据传递是常见的需求。React Router是React中用于处理路由跳转的库，它提供了多种方式来实现页面间的数据传递。本文将详细介绍React Router传参跳转的技巧，帮助你轻松实现页面间数据传递。

一、使用URL参数传递数据

在React Router中，可以通过URL参数的方式传递数据。这种方式简单易用，适合传递少量数据。

1.1 设置路由参数

首先，在路由配置中设置参数。例如，我们有一个用户详情页面，需要传递用户ID：

import React from 'react';
import { Route, Link } from 'react-router-dom';

const UserDetail = ({ match }) => {
  const userId = match.params.userId;
  return <div>用户ID：{userId}</div>;
};

const App = () => (
  <div>
    <ul>
      <li>
        <Link to="/user/123">用户123</Link>
      </li>
      <li>
        <Link to="/user/456">用户456</Link>
      </li>
    </ul>
    <Route path="/user/:userId" component={UserDetail} />
  </div>
);

export default App;

1.2 获取路由参数

在目标组件中，可以通过match.params获取参数值：

const UserDetail = ({ match }) => {
  const userId = match.params.userId;
  return <div>用户ID：{userId}</div>;
};

二、使用state或localStorage传递数据

当需要传递大量数据时，可以使用state或localStorage。

2.1 使用state传递数据

在React Router中，可以通过state传递数据。这种方式适合在组件间共享数据。

import React from 'react';
import { Route, Link, useHistory } from 'react-router-dom';

const UserProfile = () => {
  const history = useHistory();
  const userId = '123';
  history.push(`/user/${userId}`, { name: '张三', age: 20 });
};

const UserDetail = ({ match, location }) => {
  const { name, age } = location.state || {};
  return <div>用户名：{name}，年龄：{age}</div>;
};

const App = () => (
  <div>
    <ul>
      <li>
        <Link to="/user">用户列表</Link>
      </li>
      <li>
        <Link to="/user/profile">用户详情</Link>
      </li>
    </ul>
    <Route path="/user" component={UserProfile} />
    <Route path="/user/profile" component={UserDetail} />
  </div>
);

export default App;

2.2 使用localStorage传递数据

当数据需要在多个页面间共享时，可以使用localStorage。这种方式适合在页面间传递大量数据。

import React from 'react';
import { Route, Link } from 'react-router-dom';

const UserProfile = () => {
  const userId = '123';
  localStorage.setItem('userId', userId);
};

const UserDetail = () => {
  const userId = localStorage.getItem('userId');
  return <div>用户ID：{userId}</div>;
};

const App = () => (
  <div>
    <ul>
      <li>
        <Link to="/user">用户列表</Link>
      </li>
      <li>
        <Link to="/user/profile">用户详情</Link>
      </li>
    </ul>
    <Route path="/user" component={UserProfile} />
    <Route path="/user/profile" component={UserDetail} />
  </div>
);

export default App;

三、总结

本文介绍了React Router传参跳转的技巧，包括使用URL参数、state和localStorage传递数据。这些技巧可以帮助你在React应用中轻松实现页面间数据传递。希望对你有所帮助！

-- 展开阅读全文 --