React Router 直接访问带参数路由失效数据未加载问题求助

AI 小北

2026-9-30

问题根因

你的 useEffect 本身没有问题，不管从哪个路由进入应用，App 组件挂载时都会触发这个空依赖的 useEffect 发起数据请求。问题出在**异步请求和渲染的时序差：

直接访问/:id路由时，第一次渲染阶段请求还未返回，data 是初始值空数组，此时执行data.find的结果必然为null，Country 组件拿到的是空值，看起来就像数据没有初始化。等请求完成触发重渲染后，才能拿到正确的国家数据。

修复方案

增加加载状态和兜底展示
给App组件新增loading状态，在数据请求完成前统一展示加载提示，避免给Country组件接收空值。
给路由组件增加空值校验，避免渲染报错。

修改后的代码示例：

const App = () => {
  const url = 'http://localhost:3001/data'
  const [data, setData] = useState([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    console.log('useeffect in use');
    (async () => {
      const res = await axios.get(url)
      setData(res.data)
      setLoading(false)
    })()
  }, [])

  const match = useRouteMatch('/:id')
  const country = match 
    ? data.find(x => x.country === match.params.id)
    : null

  // 加载中展示提示
  if(loading) return <div>加载中...</div>

  return(
    <div className='container'>
      <Search data={data} />
      <Switch>
        <Route path='/:id'>
          {/* 加一层兜底，找不到对应国家时展示404 */}
          {country ? <Country country={country} /> : <div>未找到对应国家</div>}
        </Route>
        <Route path='/'>
          <div>Base</div>
        </Route>
      </Switch>
    </div>
  )
}