React中Link组件传递teamName参数跳转团队详情页触发404问题求助

数据老陈

2026-10-2

问题修复步骤

1. 修复基础语法错误

Atlantic.js 中 fetch 请求地址缺少闭合引号，将 fetch("RANDOM_API) 修改为 fetch("RANDOM_API")
Standings.js 导出名称不匹配，组件定义名为 Standings，将末尾导出语句修改为 export default Standings

2. 路由配置修正

跳转404绝大多数情况是React Router版本不匹配导致的写法错误：

若使用 React Router v5

确保App.js中路由外层包裹了<Switch>组件，404路由放在最底部：

import { Switch, Route } from 'react-router-dom'
// 其他组件导入省略
function App() {
  return (
    <Switch>
      <Route path="/teams" component={Teams} exact></Route> 
      <Route exact path='/:teamName' component={EachTeam} />
      {/* 404路由放在最后 */}
      <Route component={NotFound} />
    </Switch>
  )
}

若使用 React Router v6（当前主流版本）

旧版component属性已废弃，改为element写法，外层用<Routes>包裹：

import { Routes, Route } from 'react-router-dom'
// 其他组件导入省略
function App() {
  return (
    <Routes>
      <Route path="/teams" element={<Teams />} exact></Route> 
      <Route exact path='/:teamName' element={<EachTeam />} />
      {/* 404路由放在最后 */}
      <Route path="*" element={<NotFound />} />
    </Routes>
  )
}

3. 详情页参数获取修正

路由参数不能直接通过props.teamName获取，需要用路由提供的useParams钩子，修改EachTeam.js代码：

import { useParams } from 'react-router-dom';
// 移除没用的导入，useSelector是Redux专属钩子，此处不需要
function EachTeam() {
  const { teamName } = useParams();
  return (
    <div className="container">
      <h1>{teamName}</h1>
    </div>
  )
}
export default EachTeam