如何在React中从URL提取邀请码参数并传入state自动填充输入框

1. 路由配置（React Router v6 场景） #

首先配置动态路由匹配邀请链接格式，确保路径后携带的邀请码可以被路由捕获：

// 路由配置文件示例
import { createBrowserRouter } from 'react-router-dom';
import InvitePage from './InvitePage';

const router = createBrowserRouter([
  // 其他路由...
  {
    path: '/invite/:inviteCode', // :inviteCode 就是动态参数占位符
    element: <InvitePage />
  }
])

2. 功能组件实现 #

组件内提取路由参数，初始化state并绑定到输入框，用户可直接点击确认进入游戏：

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

const InvitePage = () => {
  // 提取路由中的邀请码参数
  const { inviteCode } = useParams();
  // 初始化输入框state，默认填充提取到的邀请码
  const [verifyCode, setVerifyCode] = useState(inviteCode || '');

  // 确认按钮点击逻辑
  const handleConfirm = () => {
    // 这里写校验验证码、进入游戏的业务逻辑
    console.log('当前验证码：', verifyCode);
  }

  return (
    <div className="invite-container">
      <input
        type="text"
        value={verifyCode}
        onChange={(e) => setVerifyCode(e.target.value)}
        placeholder="请输入游戏验证码"
      />
      <button onClick={handleConfirm}>确认进入游戏</button>
    </div>
  )
}

export default InvitePage;

3. 无React Router 原生实现方案 #

如果项目未使用路由库，可以直接拆分当前页面路径提取参数：

import { useState, useEffect } from 'react';

const InvitePage = () => {
  const [verifyCode, setVerifyCode] = useState('');

  useEffect(() => {
    // 拆分路径获取最后一段作为邀请码
    const pathSegments = window.location.pathname.split('/').filter(Boolean);
    const inviteCode = pathSegments[pathSegments.length - 1];
    if (inviteCode) {
      setVerifyCode(inviteCode);
    }
  }, []);

  // 其余逻辑和上面组件一致
  const handleConfirm = () => {
    console.log('当前验证码：', verifyCode);
  }

  return (
    <div className="invite-container">
      <input
        type="text"
        value={verifyCode}
        onChange={(e) => setVerifyCode(e.target.value)}
        placeholder="请输入游戏验证码"
      />
      <button onClick={handleConfirm}>确认进入游戏</button>
    </div>
  )
}

补充注意点 #

• 可以在参数提取后增加合法性校验，比如校验邀请码长度、字符格式，避免无效参数填充到输入框
• 如果邀请码可能存在大小写要求，可以在填充时统一转成大写/小写和后端规则对齐

内容的提问来源于stack exchange，提问作者jerek.orlin