React Router路由路径与导航路径不一致及@符号路由失效问题

问题1：路径带@却能匹配/:username路由的原因 #

React Router 的路径参数会匹配任意非斜杠字符，当你导航到/@${user.username}/${_id}时：

• 父路由/:username会把@${user.username}整个字符串当作:username参数的值
• 子路由:postId会匹配后面的${_id}
• 因为嵌套路由的结构完全匹配，所以对应的<Post>组件能正常渲染，只是此时useParams()获取到的username参数是带@前缀的字符串。

问题2：路由改为/@:username后页面无法渲染的排查方向 #

• 参数匹配逻辑错误：/@:username的路径规则是路径必须以/@开头，后面的部分才是:username参数。如果组件代码里仍然用@${username}拼接请求接口，会变成@@username，导致请求不到数据，页面无法渲染。
• 导航路径未同步调整：如果发布文章后的导航代码还是navigate(/@${user.username}/${_id})，此时:username参数会被解析成不带@的${user.username}，若组件依赖带@的用户名请求数据，就会出错。
• 嵌套路由的Outlet未正确配置：React Router v6 中嵌套路由必须在父路由组件里渲染<Outlet />才能显示子路由内容。如果父路由组件没添加<Outlet />，即使路径匹配，子路由的<Post>组件也不会渲染。
• 路由顺序冲突：如果路由列表里有其他优先级更高的路由（比如/*）排在/@:username前面，会导致该路由无法被匹配到，需确保/@:username路由位置更靠前。

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