攻克 react-router 路由传参难题，迅速掌握技巧！

前端

2024-02-01 23:12:07

react-router 参数传递：在 SPA 中轻松传递数据的指南

在单页面应用 (SPA) 中，路由是实现页面跳转的重要手段。与页面跳转一样，在组件或页面之间传递数据对于保持代码的可维护性和高效性至关重要。react-router 提供了强大的参数传递功能，让我们能够在不同的组件和页面之间无缝共享数据。

了解 react-router 的参数传递方式

react-router 提供了多种方式来传递参数，每种方式都有其优缺点：

URL 参数传递： 在 URL 末尾附加参数，以键值对的形式传递数据。简单易行，但参数长度有限。
路径参数传递： 将参数嵌入 URL 路径中，提供更大的灵活性。参数数量不受限制，但 URL 会变长。
状态参数传递： 将参数存储在组件或页面的状态中，不会影响 URL。参数数量不受限制，但仅限于组件或页面的内部使用。

代码示例

1. URL 参数传递

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

const App = () => {
  return (
    <>
      <Link to="/home?name=张三">带参数跳转到主页</Link>
      <Route path="/home" render={(props) => {
        const name = new URLSearchParams(window.location.search).get("name");
        return <div>欢迎: {name}</div>
      }} />
    </>
  );
};

export default App;

2. 路径参数传递

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

const App = () => {
  return (
    <>
      <Link to="/users/123">跳转到用户</Link>
      <Route path="/users/:id" render={(props) => {
        const id = props.match.params.id;
        return <div>用户 ID: {id}</div>
      }} />
    </>
  );
};

export default App;

3. 状态参数传递

import { Link, Route } from "react-router-dom";
import { useState } from "react";

const App = () => {
  const [name, setName] = useState("张三");

  return (
    <>
      <Link to={{ pathname: "/home", state: { name } }}>带参数跳转到主页</Link>
      <Route path="/home" render={(props) => {
        const state = props.location.state;
        return <div>欢迎: {state && state.name}</div>
      }} />
    </>
  );
};

export default App;