React路由传State时useParams获取zipCode为undefined问题排查

你当前的实现存在3个核心配置错误，直接导致邮编参数无法传递到Weather组件：

1. 路由未声明动态参数占位符 #

useParams的作用是读取路由路径中提前用:参数名声明的动态匹配段，你当前App.js里的天气路由只写了/weather/*，没有声明zipCode参数位，不管怎么传值，useParams都读不到对应内容。

注意：*是通配符匹配，用来匹配任意长度的剩余路径，不会把匹配到的内容赋值给指定参数名，和:参数名的作用完全不同。

2. 跳转逻辑错误，未携带参数 #

你在Form组件里用<Link to="/Weather">写死了跳转路径，既没有把用户输入的邮编拼到路径里，还存在两个低级问题：

• 路径大小写不匹配：路由定义的是小写/weather，Link写的是大写开头的/Weather，React Router v6默认大小写敏感，本身就会匹配失败
• Link是声明式导航组件，渲染时就固定了跳转目标，点击后会直接触发跳转，不会等你表单的setZipCode异步执行完成，更不会动态读取最新的输入值拼到路径上。另外Link本质是a标签，加type="submit"也不会变成表单提交按钮，无法保证表单提交逻辑完整执行。

3. 组件逻辑遗漏依赖配置 #

Weather组件里的useEffect没有声明zipCode作为依赖，就算参数能正常拿到，也可能出现请求不触发或者拿旧值发起请求的问题。

修正路由配置（App.js） #

给天气路由加上动态参数占位符：

<Routes>
  <Route exact path="/" element={<Form />} />
  {/* 声明:zipCode动态参数段 */}
  <Route exact path="/weather/:zipCode" element={<Weather />} />
</Routes>

修正表单跳转逻辑（Form.jsx） #

不要用Link做提交按钮，改用useNavigate做命令式跳转，提交表单时直接把输入的邮编拼到跳转路径里：

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

export default function Form() {
  const [zipCode, setZipCode] = useState('');
  const navigate = useNavigate();

  const handleSubmit = (e) => {
    e.preventDefault();
    // 直接从事件对象拿输入值，避开setState异步导致的值不同步问题
    const inputZip = e.target.zip.value.trim();
    setZipCode(inputZip);
    // 携带参数跳转
    navigate(`/weather/${inputZip}`);
  }

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input id="zip" />
        <label htmlFor="zip">Your Zip Code</label>
        {/* 用原生提交按钮替代Link */}
        <button type="submit" className="btn btn-primary">Enter</button>
      </form>
    </div>
  )
}

修正Weather组件请求逻辑（Weather.jsx） #

给useEffect加上依赖，参数存在时再发请求：

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

function Weather() {
  const { zipCode } = useParams();
  const [forecastObj, setForecastObj] = useState({});

  useEffect(() => {
    if (!zipCode) return;
    // 补全fetch逻辑
    fetch(`https://apiservice.com/forecast/loc=${zipCode}`)
      .then(res => {
        if (!res.ok) throw new Error('请求失败');
        return res.json();
      })
      .then(data => setForecastObj(data))
      .catch(err => console.error(err));
  // 把zipCode加入依赖数组
  }, [zipCode]);

  // 页面渲染逻辑
}

• 表单提交场景优先用useNavigate做命令式跳转，不要用固定to属性的Link，避免出现状态异步更新导致的传值丢失问题。
• 如果需要传复杂对象参数，不要全拼在路径上，可以搭配路由状态（navigate的第二个参数传state）或者全局状态管理实现，简单的单值参数（比如邮编、ID）用路径动态参数最稳妥。

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