为什么React嵌套路由组件未跳转新页面而是渲染在上一页面内容后

问题原因 #

你当前的路由结构属于典型的嵌套路由设计，Playlists 组件内同时存在播放列表卡片列表和子路由渲染逻辑，当路由匹配到/playlists/:playlistId时，父路由/playlists仍然处于匹配状态，所以整个Library、Playlists组件都会完整渲染，子路由对应的Playlist组件自然就追加在列表内容之后，不会单独替换页面内容。

解决方案 #

方案1：保留嵌套路由结构，实现点击后替换列表内容展示详情 #

修改Playlists.js代码，加入Switch组件和路由精确匹配规则，让同一时间只渲染列表或者详情：

import { Switch, Route } from "react-router-dom";

const Playlists = () => {
  const PlaylistContext = useContext(playlistContext);
  const { playlists } = PlaylistContext;
  const { url, path } = useRouteMatch();

  return (
    <section className="playlist-container">
      <Switch>
        {/* 精确匹配/playlists时渲染卡片列表 */}
        <Route exact path={path}>
          {playlists.map((playlist) => (
            <Link to={`${url}/${playlist.id}`} key={playlist.id}>
              <PlaylistCard cardDetails={playlist} />
            </Link>
          ))}
        </Route>
        {/* 匹配到id时只渲染详情组件 */}
        <Route path={`${path}/:playlistId`}>
          <Playlist />
        </Route>
      </Switch>
    </section>
  );
};

export default Playlists;

方案2：将详情路由提升到根路由配置，完全独立页面 #

如果不需要嵌套结构，直接在App.js的Switch中新增详情路由，注意要放在/playlists路由之前，避免被提前匹配：

// App.js 中修改Switch部分
<Switch>
  <Route exact path="/">
    <Home />
  </Route>
  <Route exact path="/favourites">
    <Favourites />
  </Route>
  <Route exact path="/playlistForm">
    <PlaylistForm />
  </Route>
  {/* 新增详情路由，放在/playlists之前 */}
  <Route exact path="/playlists/:playlistId">
    <Playlist />
  </Route>
  <Route exact path="/playlists">
    <Library />
  </Route>
</Switch>

之后删除Playlists.js里的子路由相关代码即可。

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