React Router 6中useParams获带冒号ID及路由匹配错误求助

问题梳理 #

• 点击RQSuperHeroes组件的Link后，URL 变为 http://localhost:3000/SuperHeroes/:2，useParams 获取的 id 带冒号（如:1），导致无法正常请求服务器。
• 修改Link路径为SuperHeroes/${el.id}后，URL 变为/RQSuperHeros/SuperHeroes/1，控制台提示“No routes matched location”错误。

分步解决 #

1. 修复 Link 路径的冒号与相对路径问题 #

RQSuperHeroes组件中，Link的to属性不需要添加冒号，且必须使用绝对路径（以/开头），否则会基于当前页面路径自动拼接，导致路由匹配失败：

原错误代码：

<Link to={`SuperHeroes/:${el.id}`} key={el.id}>

修改后：

<Link to={`/SuperHeroes/${el.id}`} key={el.id}>

2. 正确解构 useParams 返回值 #

useParams()返回的是包含路由参数的对象，需要解构出id属性，而非直接赋值整个对象：

原错误代码：

const id  = useParams();

修改后：

const { id }  = useParams();

3. 修正路由拼写不一致问题 #

App.js中存在路由路径拼写差异（/SuperHerous与/SuperHeroes），建议统一拼写避免后续混淆：

原代码：

<Route path="/SuperHerous" element={< SuperHerous />} />
<Route path="/SuperHeroes/:id" element={< SuperHero />} />

统一后：

<Route path="/SuperHeroes" element={< SuperHerous />} />
<Route path="/SuperHeroes/:id" element={< SuperHero />} />

4. 路由配置无需嵌套 #

当前App.js的路由配置是合理的，/SuperHeroes/:id作为BasicLayout的子路由，不需要额外嵌套，只要确保路径为绝对路径即可。

完整修正后的关键代码 #

RQSuperHeroes 组件（Link 部分） #

{
  data && data.length && (
    data.map(el => {
      return (
      <Link to={`/SuperHeroes/${el.id}`} key={el.id}>
        <div className='super' >
          <h2>{el.name}</h2>
          <p>{el.alterego}</p>
        </div>
      </Link>
      )
    })
  )
}

SuperHero 组件（useParams 部分） #

export const SuperHero = () => {
  const { id }  = useParams();
  const { isLoading, data, isError, error } = useSuperHero({id});

  console.log(id)

  // 其余代码保持不变
}

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