当前位置：首页 > React

react如何编码参数

2026-01-15 09:14:37React

编码参数的方法

在React中，编码参数通常涉及URL查询参数或路由参数的编码和解码。以下是几种常见场景的处理方法：

URL查询参数编码 使用encodeURIComponent对参数进行编码，避免特殊字符破坏URL结构：

const searchTerm = 'react & hooks';
const encodedTerm = encodeURIComponent(searchTerm);
// 结果: 'react%20%26%20hooks'

路由参数编码 在使用React Router时，参数会自动编码，但手动构建路径时仍需处理：

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

const navigate = useNavigate();
const productId = 'prod/123';
navigate(`/products/${encodeURIComponent(productId)}`);

获取并解码参数 从URL获取参数后需要解码：

// 使用URLSearchParams
const params = new URLSearchParams(window.location.search);
const term = params.get('q') && decodeURIComponent(params.get('q'));

// React Router v6
import { useSearchParams } from 'react-router-dom';
const [searchParams] = useSearchParams();
const decodedValue = searchParams.get('param') && decodeURIComponent(searchParams.get('param'));

axios请求参数编码 发送API请求时处理参数：

import axios from 'axios';

axios.get('/api/search', {
  params: {
    query: encodeURIComponent('special&chars')
  }
});

表单数据编码 提交表单数据时使用URLSearchParams自动编码：

const formData = new URLSearchParams();
formData.append('username', 'user@example.com');
formData.append('password', 'p@ss&word');

fetch('/login', {
  method: 'POST',
  body: formData
});