React Router 不支持在 path 属性中直接使用查询字符串（如 mxm_track_id=123&spfy_album_id=abc）进行匹配；必须改用 useSearchParams 读取查询参数，或改用路径参数（如 /track/:mxmTrackId/:spfyAlbumId）配合 useParams。
react router 不支持在 `path` 属性中直接使用查询字符串（如 `mxm_track_id=123&spfy_album_id=abc`）进行匹配；必须改用 `usesearchparams` 读取查询参数，或改用路径参数（如 `/track/:mxmtrackid/:spfyalbumid`）配合 `useparams`。
在 React Router v6+ 中，路由匹配仅基于 URL 路径（pathname）部分，完全忽略查询字符串（search）。你当前的写法：
<Route path="mxm_track_id=:mxmTrackId&spfy_album_id=:spotifyAlbumId" element={<TrackLyrics />} />是无效的——React Router 将其视为字面路径，试图匹配形如 /track/mxm_track_id=:mxmTrackId&spfy_album_id=:spotifyAlbumId 的 URL，而实际浏览器地址栏显示的是：
http://localhost:3000/track/mxm_track_id=159136220&spfy_album_id=38cYOdPjt5btA4AMYmbZjn
注意：该 URL 的 mxm_track_id=...&spfy_album_id=... 实际属于 查询字符串（search），但你的 <Link to="..."> 构造方式却把它拼在了路径段中（即错误地写成了 /track/mxm_track_id=...&spfy_album_id=...），导致整个 pathname 变为非法嵌套结构，无法被任何 path 模式识别。
✅ 正确方案一：使用查询参数（推荐用于可选、非关键标识符）
修改 <Link>，将参数转为标准查询字符串格式：
// TrackPreview.jsx
<Link
to={`/track?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>更新路由配置（移除嵌套路径，简化为静态 /track）：
// 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 <div className="error">缺少必要参数，请返回重试。</div>;
}
// 后续调用 API 获取歌词等逻辑...
return (
<div className="track-lyrics-page">
<h1>歌词详情</h1>
<p>MXM ID: {mxmTrackId}</p>
<p>Spotify Album ID: {spfyAlbumId}</p>
{/* 渲染歌词内容 */}
</div>
);
};✅ 正确方案二：使用路径参数（推荐用于核心、必需的资源标识）
若 mxm_track_id 和 spfy_album_id 是页面唯一性所必需的（例如 SEO 友好、服务端渲染兼容），建议采用路径参数方式：
更新 <Link>：
// TrackPreview.jsx
<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>在 TrackLyrics.jsx 中使用 useParams：
// TrackLyrics.jsx
import { useParams } from 'react-router-dom';
export const TrackLyrics = () => {
const { mxmTrackId, spfyAlbumId } = useParams();
if (!mxmTrackId || !spfyAlbumId) {
return <NotFound />; // 或自定义提示
}
return (
<div className="track-lyrics-page">
<h1>歌词详情</h1>
<p>MXM ID: {mxmTrackId}</p>
<p>Spotify Album ID: {spfyAlbumId}</p>
{/* 渲染歌词内容 */}
</div>
);
};⚠️ 关键注意事项
- ❌ 不要在 path 中写 &、=、? 等查询字符——它们不属于路径匹配范畴；
- ✅ 查询参数永远通过 useSearchParams() 读取，路径参数永远通过 useParams() 读取；
- ✅ 路由顺序很重要：更具体的路径应放在更通用的路径之前（本例中 /track/:a/:b 必须在 /* 之前）；
- ✅ 生产环境建议对参数做类型校验与空值防护，避免运行时错误；
- ✅ 若需保留历史记录或支持浏览器前进/后退，两种方案均天然支持，无需额外处理。
选择哪种方案？
→ 若参数语义上属于“筛选条件”或“可选附加信息”，用 查询参数 + useSearchParams；
→ 若参数是资源的核心标识（类似 /users/123），用 路径参数 + useParams —— 更符合 REST 风格，也利于服务端直出与 SEO。
