在构建单页面应用（SPA）时，React 路由传值是一个重要的技能。通过掌握路由传值的技巧，可以让数据在组件间流动得更加顺畅。本文将详细介绍 React 路由传值的三种方式，并辅以实际代码示例，帮助读者轻松掌握。
一、路由传值的三种方式
params传参
params传参是通过在路由路径中添加参数占位符来实现传值的。这种方式适用于刷新页面时参数不会丢失的场景。
示例代码：
// 路由配置

// 获取参数
this.props.match.params.id
优点：
刷新页面，参数不丢失。
缺点：
只能传字符串，传值过多URL会变得很长；参数必须在路由上配置。
state传参
state传参是将参数作为state存储在组件中，然后通过this.props.location.state来获取。
示例代码：
// 路由配置

// 跳转时传递参数
跳转到产品详情

// 获取参数
const productId = this.props.location.state.productId
优点：
可以传递复杂的数据结构。
缺点：
刷新页面，参数会丢失。
query传参
query传参是将参数拼接到URL的查询字符串中。
示例代码：
// 路由配置

// 跳转时传递参数
跳转到产品详情

// 获取参数
const productId = this.props.location.search.split(‘=’)[1]
优点：
简单易用，无需在路由上配置。
缺点：
不适合传递复杂的数据结构。
二、路由传值的实际应用
以下是一个简单的示例，展示了如何在React中使用路由传值。
1. 创建一个React应用
npx create-react-app my-app
cd my-app
2. 安装react-router-dom
npm install react-router-dom
3. 创建路由组件
// ProductPage.js
import React from ‘react’;

const ProductPage = ({ productId }) => {
return (

);
};

export default ProductPage;
4. 配置路由
// App.js
import React from ‘react’;
import { BrowserRouter as Router, Route, Link } from ‘react-router-dom’;
import ProductPage from ‘./ProductPage’;

const App = () => {
return (

);
};

export default App;
5. 运行应用
npm start
通过以上步骤，您将成功创建一个简单的React应用，并掌握了路由传值的技巧。在实际开发中，根据需求选择合适的传值方式，可以让数据在组件间流动得更加顺畅。