React应用中向API传递Vehicle Type参数失败问题排查

你遇到的核心问题是：VehicleBrand 组件试图通过 useParams 获取 vehicle 参数，但你的路由配置中 /VehicleBrand 路径没有定义任何URL参数，导致 useParams() 返回的 vehicle 始终是 undefined。而你实际是通过Redux Toolkit管理 vehicle 状态的，却没有在组件中正确读取Redux里的状态值。

直接从Redux Store中读取已维护的 vehicle 状态，替换掉错误的 useParams 用法。

代码修改（VehicleBrand组件） #

import { useSelector } from 'react-redux'
import { RootState } from '../../store/store' // 注意路径要匹配你的store文件位置
import MainBox from '../../components/MainBox'
import { useGetBrandQuery } from '../../services/api'

export type Brand = {
  codigo: string
  nome: string
}

const VehicleBrand = () => {
  // 从Redux Store中获取vehicle状态，替代useParams
  const vehicle = useSelector((state: RootState) => state.vehicle.vehicle)
  // 基于Redux中的有效值发起API请求
  const { data: brand, error, isLoading } = useGetBrandQuery(vehicle)

  // 可选：添加加载/错误状态提示
  if (isLoading) return <div className="container">加载中...</div>
  if (error) return <div className="container">请求失败：{(error as any).status}</div>

  return (
    <div className="container">
      <MainBox
        children="Selecione a marca do veículo"
        to="/VehicleModel"
        selectIsVisible={true}
        btnChildren="Buscar"
        resultIsVisible={false}
        brand={brand}
      />
    </div>
  )
}

export default VehicleBrand

1. API请求防护：在RTK Query的端点中添加空值判断，避免无效请求：

// 在api配置的getBrand端点中修改
getBrand: builder.query<Brand[], string>({
  query: (vehicle) => {
    // 如果vehicle为空，返回一个不会触发请求的路径（或抛出错误）
    if (!vehicle) throw new Error("Vehicle type is required")
    return `${vehicle}/marcas`
  },
}),

2. 路由与状态同步（可选）：如果你希望通过URL参数同步车辆类型，可以修改路由配置和Header导航：

• 修改路由：

// PagesRouter.js
<Route path="/VehicleBrand/:vehicle" element={<VehicleBrand />} />

• 修改Header中的导航链接，同时更新Redux和路由：

// Header.js
import { useDispatch } from 'react-redux'
import { useNavigate } from 'react-router-dom'
import * as S from './styles'
import { change } from '../../store/reducers/vehicle'

const Header = () => {
  const dispatch = useDispatch()
  const navigate = useNavigate()

  const handleChangeVehicle = (vehicle: string) => {
    dispatch(change(vehicle))
    navigate(`/VehicleBrand/${vehicle}`)
  }

  // ...其余代码不变
}

此时VehicleBrand组件就可以同时从路由参数和Redux获取值（建议以Redux状态为权威来源）。

1. 定位参数来源：在VehicleBrand组件中console.log(vehicle)，确认值为undefined，说明useParams没有拿到预期值。
2. 检查路由配置：查看路由表，发现/VehicleBrand路径未定义URL参数，useParams自然取不到值。
3. 回溯状态流转：回忆Header组件是通过Redux的change action更新状态，因此组件应该从Redux Store读取状态，而非路由参数。

内容的提问来源于stack exchange，提问作者Lucas Souza Duarte