精通React路由传参：实现无缝页面跳转与数据传递

每种参数传递方式都有其独特的应用场景和优缺点。了解并正确选择合适的参数传递方法，对于构建高效、灵活且用户体验良好的React应用至关重要。无论是展示个性化内容、实现动态搜索功能还是确保数据传输的安全性，掌握这些技术都能为你的开发工作带来极大的便利。

z001126

1761人浏览 · 2025-02-10 00:27:26

z001126 · 2025-02-10 00:27:26 发布

前言

在当今快速发展的Web开发领域，React凭借其组件化架构和高效的渲染机制成为了构建用户界面的首选技术之一。然而，随着应用规模的增长和复杂度的提升，如何在不同视图之间优雅地传递数据并实现无缝的页面跳转，逐渐成为了开发者们面临的重要课题。特别是在单页应用（SPA）中，合理的参数传递策略不仅能够极大提升用户体验，还能显著改善代码的可维护性和扩展性。

本文旨在为读者提供一个全面而深入的指南，专注于React应用中的路由跳转与参数传递技巧。本文将不涉及基础的路由配置，而是聚焦于如何利用react-router-dom库提供的强大功能来实现高效、灵活的数据传输方案。无论你是希望优化现有项目的开发者，还是正在寻找更优解决方案的新手，本文都将为你提供宝贵的见解和技术指导。

我们将探讨以下几种主要的参数传递方式：

路径参数（Route Params）：通过URL路径直接传递动态参数，适用于需要明确标识资源ID等场景。
查询参数（Query Params）：使用URL中的查询字符串传递过滤条件、搜索词等非敏感信息。
状态参数（State Params）：在编程式导航过程中，通过状态对象安全且隐蔽地传递复杂或敏感数据。

此外，我们还将分享一些实用的技巧和最佳实践，帮助你更好地理解和应用这些概念，避免常见的错误和陷阱。通过本文的学习，你将能够更加自信地处理复杂的路由需求，构建出既高效又易于维护的应用程序。

让我们一起深入了解React路由传参的艺术，探索如何通过巧妙的设计让我们的应用交互更加流畅、体验更加出色。无论是简化开发流程，还是提升最终用户的满意度，掌握这些知识都将成为你在Web开发道路上的一大助力。准备好迎接挑战了吗？让我们开始吧！

正文

我们这里跳转时统一是用 react-router-dom里的useNavigate进行跳转

import { useNavigate } from 'react-router-dom'

const navigate = useNavigate()

使用实例

路径参数（Route Params）

使用这个跳转方式传参时，我们要定义一个跳转目标的带有传参路径的路由

{ path: 'params/:id', element: <ParamsPage />, isPrivate: true }

然后我们跳转时，要在路径上加上参数

const goParamsPage = () => {
    navigate('/params/abc') // abc是传入的id
  }

然后我们在跳转目标页是通过react-router-dom中的useParams来接受参数

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

const ParamsPage: React.FC = () => {
  let { id } = useParams()

  return <div>接收到的参数是：{id}</div>
}

export default ParamsPage

查询参数（Query Params）

页面跳转时

 const goAbout = () => {
    navigate('/about?id=sss') // 传入一个id是sss
  }

我们在跳转目标页是通过react-router-dom中的useSearchParams来接受参数，用useEffect来监听

import { useEffect } from 'react'
import { useSearchParams } from 'react-router-dom'

const About: React.FC = () => {
    let [searchParams] = useSearchParams()
    let search_id = searchParams.get('id');

    useEffect(() => {
      console.log(search_id)
    }, [search_id])

     return (
        <div className="contain">
        接收参数：{search_id}
        </div>
      )
}

export default About

状态参数（State Params）

页面跳转时

const goNew = () => {
    navigate('/news', { state: { id: 1 } })
  }

我们在跳转目标页是通过react-router-dom中的useLocation来接受参数，用useEffect来监听

import { useEffect } from 'react'
import { useLocation } from 'react-router-dom'

const NewsPage: React.FC = () => {
  const location = useLocation()
  const { id } = location.state || {}

  useEffect(() => {
    console.log(id)
  }, [location.state])

  return (
    <div>
      接收参数：{id}
    </div>
  )
}

export default NewsPage

详细解析

路径参数（Route Params）

路径参数是通过URL路径的一部分来传递数据的一种方法。它通常用于标识特定资源，比如用户资料页面中的用户ID或产品详情页中的产品ID。在React中使用react-router-dom时，你可以通过在路由定义中使用冒号(:)来指定一个路径参数。例如，如果你想访问某个用户的详细信息，可以这样设置路由：/user/:id，这里的:id就是一个路径参数。

当你导航到如/user/123这样的路径时，react-router-dom会自动解析出这个ID，并允许你在目标组件中通过useParams钩子获取该值。这种方式非常适合需要直接从URL中读取关键信息的场景，因为它不仅使URL更加直观易懂，还方便了用户直接分享具体的资源链接。例如，在社交网络应用中，用户个人主页的URL可能会包含他们的唯一标识符，使得其他用户可以直接通过该链接访问其个人资料。

查询参数（Query Params）

查询参数是通过URL中的查询字符串来传递额外信息的方式。它们通常被用来过滤数据或者进行搜索操作。与路径参数不同的是，查询参数不会影响页面的主要内容结构，而是作为辅助信息存在。例如，在一个商品搜索页面中，你可能希望根据不同的条件（如价格区间、品牌等）筛选商品，这时就可以利用查询参数将这些条件附加到URL上，如/search?category=electronics&price=low。

在React应用中，你可以使用useSearchParams钩子来读取查询参数。这使得你能够轻松地根据当前的查询参数调整页面内容。查询参数的优势在于它们对用户透明且易于复制分享，但需要注意的是，由于查询参数直接显示在URL中，因此不适合传递敏感信息。此外，当有多个查询参数时，保持URL简洁清晰变得尤为重要。

状态参数（State Params）

状态参数提供了一种更为隐蔽的数据传递方式，它允许你在执行编程式导航时传递任意JavaScript对象。这意味着你可以安全地传递复杂或敏感的信息，而无需担心这些数据会暴露在URL中。例如，在电商应用中，当你点击“查看详情”按钮跳转到商品详情页时，可能需要同时传递一些关于购物车的状态信息或用户的选择偏好，这时就可以利用状态参数来完成这一任务。

在React中，你可以通过调用navigate函数并传入一个包含state属性的对象来进行状态参数的传递。然后，在目标组件中，可以通过useLocation钩子访问这个状态对象。尽管状态参数提供了更高的灵活性和安全性，但也需要注意，由于这些数据不会持久化存储，因此如果页面刷新或重新加载，之前传递的状态将会丢失。