正文

新手必学：React路由传参全攻略，实战案例详解参数传递技巧

/0 浏览量
1026

在React项目中，路由传参是常见的功能需求。通过路由传参，我们可以将数据从父组件传递到子组件，或者在不同的页面间传递数据。本文将详细介绍React路由传参的方法，并通过实战案例来展示参数传递的技巧。

一、React路由传参方法

React Router提供了多种方式来实现路由传参，以下是几种常见的传参方法：

1. Query Parameters（查询参数）

Query Parameters是URL中的一部分，以?开头，后面跟着键值对。在React Router中，可以使用<Link>组件的to属性或者useSearchParams钩子来实现查询参数的传递。

// 使用Link组件传递查询参数
<Link to={`/detail?id=${id}`}>详情</Link>

// 使用useSearchParams钩子获取查询参数
const [searchParams] = useSearchParams();
const id = searchParams.get('id');

2. Route Parameters（路由参数）

Route Parameters是通过路径传递参数的一种方式，通常用于动态路由。在React Router中，可以使用动态路径来实现路由参数的传递。

// 定义动态路由
<Route path="/detail/:id" component={Detail} />

// 在组件中获取路由参数
const id = this.props.match.params.id;

3. State Parameters（状态参数）

State Parameters是使用history.push或useNavigate钩子传递参数的一种方式。这种方式将参数存储在路由对象的状态中。

// 使用history.push传递状态参数
history.push(`/detail/${id}`, { detail: data });

// 使用useNavigate钩子获取状态参数
const navigate = useNavigate();
const { state: { detail } } = navigate.getState();

二、实战案例详解

以下是一个简单的实战案例，演示了如何在React Router中传递和获取参数。

1. 创建项目

首先，创建一个React项目：

npx create-react-app react-router-params
cd react-router-params

2. 安装依赖

安装React Router库：

npm install react-router-dom

3. 定义路由

在src/App.js中定义路由：

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import Home from './components/Home';
import Detail from './components/Detail';

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">首页</Link>
            </li>
            <li>
              <Link to="/detail/123">详情页</Link>
            </li>
          </ul>
        </nav>
        <Switch>
          <Route path="/" component={Home} />
          <Route path="/detail/:id" component={Detail} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;

4. 实现首页和详情页

在src/components/Home.js中实现首页：

import React from 'react';

function Home() {
  return <h1>首页</h1>;
}

export default Home;

在src/components/Detail.js中实现详情页：

import React from 'react';

function Detail(props) {
  const { id } = props.match.params;
  return <h1>详情页：{id}</h1>;
}

export default Detail;

5. 运行项目

运行项目并访问http://localhost:3000/，可以看到首页和详情页的内容。

三、总结

本文介绍了React路由传参的几种方法，并通过实战案例展示了参数传递的技巧。在实际项目中，根据需求选择合适的传参方式，可以有效地实现页面间的数据传递。希望本文能帮助你更好地理解和应用React路由传参。

-- 展开阅读全文 --