React Router路由参数冒号被带入Fetch请求URL导致500错误的问题求助

你的路由定义<Route path="/character/:id">是完全正确的，问题出在跳转到该路由的链接上——你大概率是在导航时错误地把路由占位符的:id语法直接写进了实际路径里，比如用了类似<Link to="/character/:2">的写法，而非传入真实的ID值，这才导致useParams()拿到的id带了冒号，最终触发API请求错误。

根本原因拆解 #

React Router里的:id是参数占位符，它的作用是匹配URL中该位置的任意值，并把这个值作为id参数通过useParams()返回。比如用户访问/character/2时，useParams()会返回{ id: '2' }；但如果跳转链接写成了/character/:2，那useParams()拿到的id就会是:2，直接导致API请求URL变成https://rickandmortyapi.com/api/character/:2，自然触发500错误。

正确的解决方法 #

你需要检查所有跳转到/character/:id路由的地方，确保用真实的ID值拼接路径，而非带着冒号的占位符：

1. 使用<Link>组件跳转的正确写法

假设你在Home组件里渲染角色列表，每个角色卡片的跳转链接应该这样写：

import { Link } from 'react-router-dom';

// 假设character是从API获取的单个角色对象
<Link to={`/character/${character.id}`}>
  <h3>{character.name}</h3>
</Link>

用模板字符串把角色的真实id值拼接到路径中，跳转后的URL就是/character/2，useParams()就能拿到正确的id: '2'。

2. 使用编程式导航的正确写法

如果是通过history.push跳转，也要确保传入正确的路径：

import { useHistory } from 'react-router-dom';

const history = useHistory();

// 点击按钮跳转的示例
const handleCharacterClick = (characterId) => {
  history.push(`/character/${characterId}`);
};

为什么临时方案不可取 #

你用id.substring(1)去掉冒号的方式只是治标不治本：

• 它掩盖了真正的错误来源，后续维护时容易混淆问题根源；
• 如果之后需要给SingleCharacter组件添加嵌套路由（比如/character/:id/episodes），这种硬编码的字符串处理会破坏嵌套路由的参数解析，引发新的问题。

额外验证步骤 #

可以在SingleCharacter组件里先打印完整的useParams()结果，确认参数是否正确：

const params = useParams();
console.log('路由参数:', params);
// 正确结果应该是 { id: '2' }，而非 { id: ':2' }

内容的提问来源于stack exchange，提问作者Uroš Drča