React 路由传参的多种方式，助力打造动态网页应用

2024-02-21 10:41:08

利用 React 路由传参实现动态应用

概览

React 路由是构建现代动态网页应用的强大工具，它允许我们轻松地在页面之间导航并传递数据。本文将深入探讨 React 路由传参的各种方法，包括 params、拼接地址、querystring 和 context 方式，帮助您根据具体需求选择最佳方案。

1. params（动态路由）方式

params 方式是最常见的路由传参方式，它使用冒号 (:) 定义动态路由段，然后通过 useParams 钩子获取动态路由段的值。这种方式的优点是简洁易用，且不会使 URL 显得冗长。

import { useParams } from "react-router-dom";

const Component = () => {
  const params = useParams();
  const id = params.id;

  return (
    <div>
      <h1>ID: {id}</h1>
    </div>
  );
};

2. 拼接地址方式

拼接地址方式简单直观，它直接在 URL 中拼接参数值。这种方式不需要使用任何钩子，但可能会导致 URL 冗长且难以阅读。

const url = `/user/${id}`;

3. querystring 方式

querystring 方式通过在 URL 中添加查询字符串来传递参数。这种方式兼容性好，但也会使 URL 冗长。

const url = `/user?id=${id}`;

4. context 方式

context 方式通过 React 的 Context API 传递参数。这种方式允许在组件树的任意位置访问参数值，但实现相对复杂，可能影响性能。

import { createContext } from "react";

const UserContext = createContext();

const Provider = ({ children }) => {
  const [user, setUser] = useState(null);

  return (
    <UserContext.Provider value={{ user, setUser }}>
      {children}
    </UserContext.Provider>
  );
};

const Component = () => {
  const user = useContext(UserContext);

  return (
    <div>
      <h1>Username: {user.name}</h1>
    </div>
  );
};