为什么 React Component 在同一个页面而不是另一个页面上呈现？

Question

所以除了嵌套路由之外，所有组件在新页面上都可以正常渲染。 url 也发生了变化，但组件在上一页的所有组件之后呈现在同一页面上，而不是在自己的页面上呈现。 这是代码

App.js

function App() {
  return (
    <PlaylistState>
      <Router>
        <div className="App">
          <Navigation />
          <main className="content-container">
            <Switch>
              <Route exact path="/">
                <Home />
              </Route>
              <Route exact path="/favourites">
                <Favourites />
              </Route>
              <Route exact path="/playlistForm">
                <PlaylistForm />
              </Route>
              <Route path="/playlists">
                <Library />
              </Route>
            </Switch>
          </main>
        </div>
      </Router>
    </PlaylistState>
  );
}

export default App;

Library.js

const Library = () => {
  return (
    <div>
      <h1 className="my-2">Library</h1>
      <Playlists />
    </div>
  );
};

export default Library;

Playlists.js

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

  // console.log(url);
  console.log("path", path);

  return (
    <section className="playlist-container">
      {playlists.map((playlist) => (
        <>
          <Link to={`${url}/${playlist.id}`}>
            <PlaylistCard key={playlist.id} cardDetails={playlist} />
          </Link>
        </>
      ))}

      <Route path={`${path}/:playlistId`}>
        <Playlist />
      </Route>
    </section>
  );
};

export default Playlists;

Answer 1

这是嵌套路由的预期行为，它在父组件内呈现，请参阅this question。

如果您希望路由 "/playlists/:playlistId" 仅渲染 <Playlist />，您应该在顶层拥有所有其他路由的兄弟。

编辑：代码

    function App() {
      return (
        <PlaylistState>
          <Router>
            <div className="App">
              <Navigation />
              <main className="content-container">
                <Switch>
                  ...
                  <Route path="/playlists/:id">
                    <Playlist />
                  </Route>
                  <Route path="/playlists">
                    <Library />
                  </Route>
                </Switch>
              </main>
            </div>
          </Router>
        </PlaylistState>
      );
    }

导出默认应用；