React Router 不支持在 path 属性中直接匹配查询字符串（如 ?mxm_track_id=123&spfy_album_id=abc），导致路由始终 fallback 到 NotFound；应改用 useSearchParams 读取查询参数，或重构为路径参数并配合 useParams 使用。
react router 不支持在 `path` 属性中直接匹配查询字符串（如 `?mxm_track_id=123&spfy_album_id=abc`），导致路由始终 fallback 到 `notfound`；应改用 `usesearchparams` 读取查询参数，或重构为路径参数并配合 `useparams` 使用。
在 React Router v6+ 中，路由匹配仅基于 URL 路径（pathname）部分，完全忽略查询字符串（search）。你当前的写法：
<Route path="mxm_track_id=:mxmTrackId&spfy_album_id=:spotifyAlbumId" element={<TrackLyrics />} />是无效的——React Router 不会将 &、= 或查询键名视为路径动态段，它只识别 / 分隔的路径段（如 :id、:slug）。因此，即使浏览器跳转到了：
http://localhost:3000/track/mxm_track_id=159136220&spfy_album_id=38cYOdPjt5btA4AMYmbZjn
Router 实际解析的 pathname 是 /track/mxm_track_id=159136220&spfy_album_id=38cYOdPjt5btA4AMYmbZjn，而你的嵌套路由 path="mxm_track_id=:mxmTrackId&spfy_album_id=:spotifyAlbumId" 并未声明任何 / 前缀，且语法不符合路径参数规范，最终无法匹配。
✅ 正确方案一：使用查询参数（推荐用于非语义化、可选参数）
修改 <Link>，将查询参数写在 to 的 search 部分（而非拼接进 pathname）：
// TrackPreview.jsx
<Link
to={{
pathname: "/track",
search: `?mxm_track_id=${props.data.id}&spfy_album_id=${props.album.album_spotify_id}`
}}
className="track_preview_topline"
>
<h3 className="track_preview_name">{props.data.name}</h3>
<h5 className="track_preview_artist">{props.data.artist}</h5>
</Link>更新路由配置（扁平化，移除无效嵌套）：
// index.js
<Routes>
<Route path="/" element={<Home />} />
<Route path="/track" element={<TrackLyrics />} /> {/* 直接匹配 /track */}
<Route path="/search" element={<SearchResults />} />
<Route path="*" element={<NotFound />} />
</Routes>在 TrackLyrics.jsx 中使用 useSearchParams 安全读取：
// TrackLyrics.jsx
import { useSearchParams } from 'react-router-dom';
export const TrackLyrics = () => {
const [searchParams] = useSearchParams();
const mxmTrackId = searchParams.get('mxm_track_id');
const spfyAlbumId = searchParams.get('spfy_album_id');
// ⚠️ 注意：务必校验参数存在性
if (!mxmTrackId || !spfyAlbumId) {
return <NotFound />;
}
// 后续逻辑：请求歌词、渲染内容等
return (
<div>
<h1>Lyrics for Track ID: {mxmTrackId}</h1>
<p>Album ID: {spfyAlbumId}</p>
{/* ... */}
</div>
);
};✅ 正确方案二：使用路径参数（推荐用于关键、语义化 ID）
若 mxm_track_id 和 spfy_album_id 是核心资源标识符，更符合 RESTful 风格的做法是将其作为路径段：
// TrackPreview.jsx —— 修改 Link to 值
<Link
to={`/track/${props.data.id}/${props.album.album_spotify_id}`}
className="track_preview_topline"
>
<h3 className="track_preview_name">{props.data.name}</h3>
<h5 className="track_preview_artist">{props.data.artist}</h5>
</Link>更新路由（注意路径需完整匹配）：
// index.js
<Routes>
<Route path="/" element={<Home />} />
<Route path="/track/:mxmTrackId/:spfyAlbumId" element={<TrackLyrics />} />
<Route path="/search" element={<SearchResults />} />
<Route path="*" element={<NotFound />} />
</Routes>组件内使用 useParams：
// TrackLyrics.jsx
import { useParams } from 'react-router-dom';
export const TrackLyrics = () => {
const { mxmTrackId, spfyAlbumId } = useParams();
if (!mxmTrackId || !spfyAlbumId) {
return <NotFound />;
}
return (
<div>
<h1>Lyrics for Track ID: {mxmTrackId}</h1>
<p>Album ID: {spfyAlbumId}</p>
</div>
);
};? 关键注意事项
- ❌ 不要在 path 中写 ?、&、=：React Router v6+ 的 path 仅支持静态路径、: 开头的动态段、* 通配符。
- ✅ 查询参数 → useSearchParams()；路径参数 → useParams()；两者不可混用。
- ✅ Link.to 支持对象格式（含 pathname + search），比字符串拼接更安全、可读性更强。
- ✅ 在组件中始终校验参数有效性，避免因缺失参数导致渲染异常或请求失败。
- ✅ 若需 SEO 友好或资源语义明确（如 /track/123/abc 明确表示“某首歌的歌词”），优先选用路径参数方案。
通过以上任一方式修正，TrackLyrics 组件即可被正确匹配并渲染，彻底解决 NotFound 误触发问题。
