ReactJS如何将组件状态变量传递至另一页面的URL路由参数？

1. 在Navbar.jsx中添加路由跳转逻辑 #

先引入react-router的useNavigate钩子实现页面跳转，同时处理搜索提交的触发事件（表单提交或回车均可）：

// 导入useNavigate
import { useNavigate } from 'react-router-dom';

const Navbar = () => {
  const [query, setQuery] = useState("");
  const navigate = useNavigate(); // 初始化导航方法

  const handleChange = (e) => {
    setQuery(e.target.value);
  };

  // 处理搜索提交
  const handleSearch = () => {
    if (!query.trim()) return; // 空内容不执行跳转
    // 对query编码，避免特殊字符破坏URL结构
    const encodedQuery = encodeURIComponent(query);
    navigate(`/search/${encodedQuery}`);
  };

  return (
    <div>
      {/* 方式一：表单包裹，支持按钮点击/回车提交 */}
      <form onSubmit={(e) => {
        e.preventDefault();
        handleSearch();
      }}>
        <input 
          value={query} 
          id="query" 
          onChange={handleChange}
          placeholder="搜索电影..."
        />
        <button type="submit">搜索</button>
      </form>

      {/* 方式二：仅监听回车事件（无需按钮时用） */}
      {/*
      <input 
        value={query} 
        id="query" 
        onChange={handleChange}
        placeholder="搜索电影..."
        onKeyPress={(e) => {
          if (e.key === 'Enter') {
            handleSearch();
          }
        }}
      />
      */}
    </div>
  );
};

2. 在Search.jsx中获取路由参数 #

用react-router的useParams钩子提取URL中的query参数，记得解码还原原始内容：

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

const Search = () => {
  const { query } = useParams();
  // 解码还原原始搜索关键词
  const decodedQuery = decodeURIComponent(query);

  // 后续可使用decodedQuery请求电影数据
  console.log('搜索关键词：', decodedQuery);

  return (
    <div>
      <h1>搜索结果：{decodedQuery}</h1>
      {/* 渲染搜索结果列表 */}
    </div>
  );
};

关键说明 #

• 必须用encodeURIComponent和decodeURIComponent处理query：搜索关键词可能包含空格、&、?等特殊字符，直接拼入URL会导致路由解析错误，编码后能保证URL合法性。
• 路由保持你原有的"/search/:query"配置即可，react-router会自动匹配参数。

内容的提问来源于stack exchange，提问作者zeitgeist_7