React Router无法识别有效路径，始终渲染NotFound组件

核心问题分析 #

你的URL格式和路由配置不匹配是导致无法渲染TrackLyrics的关键：当前URL把查询参数（mxm_track_id=xxx&spfy_album_id=xxx）直接拼在了/track的路径后，而非标准的查询字符串格式（/track?mxm_track_id=xxx&spfy_album_id=xxx），同时路由配置的嵌套参数规则也没对应上这种格式。

具体排查点及修复方案 #

1. Link组件的跳转格式错误 #

你当前的Link可能是这样写的：

<Link to={`/track/mxm_track_id=${mxmTrackId}&spfy_album_id=${spfyAlbumId}`}>查看歌词</Link>

这种写法会把查询参数当成/track的子路径，而非标准查询字符串。正确写法应该是传递查询参数：

<Link 
  to={{
    pathname: '/track',
    search: `?mxm_track_id=${mxmTrackId}&spfy_album_id=${spfyAlbumId}`
  }}
>
  查看歌词
</Link>

这样生成的URL会是/track?mxm_track_id=159136220&spfy_album_id=38cYOdPjt5btA4AMYmbZjn，符合React Router对查询参数的处理规则。

2. 路由配置不匹配 #

如果你的路由是这样嵌套的（错误示例）：

<Route path="/track" element={<TrackParent />}>
  <Route path=":mxm_track_id&:spfy_album_id" element={<TrackLyrics />} />
</Route>

这种配置完全无法匹配当前的URL格式。正确的配置应该是直接将/track指向TrackLyrics组件（因为用的是查询参数，不需要嵌套子路由）：

// React Router v6 示例
<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/search" element={<SearchResults />} />
  <Route path="/track" element={<TrackLyrics />} />
  <Route path="*" element={<NotFound />} />
</Routes>

然后在TrackLyrics组件中通过useSearchParams获取参数：

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

function TrackLyrics() {
  const [searchParams] = useSearchParams();
  const mxmTrackId = searchParams.get('mxm_track_id');
  const spfyAlbumId = searchParams.get('spfy_album_id');
  
  // 后续逻辑：根据参数获取歌词
  return <div>{/* 歌词内容 */}</div>;
}

3. 嵌套路由的Outlet缺失（若坚持用路径参数） #

如果你想改用路径参数（URL格式为/track/159136220/38cYOdPjt5btA4AMYmbZjn），则需要：

• 修改Link：

<Link to={`/track/${mxmTrackId}/${spfyAlbumId}`}>查看歌词</Link>

• 修正路由配置，并确保父路由组件包含Outlet：

// TrackParent组件
import { Outlet } from 'react-router-dom';

function TrackParent() {
  return <Outlet />; // 必须有Outlet才能渲染子路由组件
}

// 路由配置
<Routes>
  <Route path="/track" element={<TrackParent />}>
    <Route path=":mxmTrackId/:spfyAlbumId" element={<TrackLyrics />} />
  </Route>
  {/* 其他路由 */}
  <Route path="*" element={<NotFound />} />
</Routes>

• 在TrackLyrics中用useParams获取参数：

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

function TrackLyrics() {
  const { mxmTrackId, spfyAlbumId } = useParams();
  // 后续逻辑
}

4. 路由顺序问题 #

确保NotFound路由（path="*"）是所有路由的最后一项，否则会优先匹配NotFound，覆盖其他路由。

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