有没有办法在页面上只留下一个组件和链接的内容？

Question

这是代码：

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Navbar from "./components/navbar/navbar";
import Intro from "./components/intro/intro";
import Services from "./components/services/services";
import Experience from "./components/experience/experience";
import TrelloClone from "./pages/TrelloClone/TrelloClone";
import './App.css'

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Navbar />
        <Routes>
          {/* <Route path="/vanillajs" element={SpotifyClone} />
          <Route path="/djangoapi" element={InstagramClone} /> */}
          <Route path="/reactjs" element={<TrelloClone />} />
        </Routes>
      </BrowserRouter>
      <Intro />
      <Services />
      <Experience />
    </div>
  );
}

export default App;

所以基本上我需要隐藏（或删除） <Intro /> 、 <Services />和<Experience /> ，方法是单击指向“ /reactjs ”路径的链接，但将<Navbar />留在页面上。

编辑：语法和说明

Answer 1

从此链接安装此history ，当您的软件包安装成功后，创建一个文件 history.js 并将以下代码放入此文件中。

import {createBrowserHistory} from 'history';

export default createBrowserHistory();

在此文件中导入历史文件，如import history from './history' ，然后您将获得历史道具，您可以控制台历史道具并检查哪些道具即将到来，您将在历史道具中找到pathname并创建条件正如您在下面的代码中看到的那样。

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import history from './history'
import Navbar from "./components/navbar/navbar";
import Intro from "./components/intro/intro";
import Services from "./components/services/services";
import Experience from "./components/experience/experience";
import TrelloClone from "./pages/TrelloClone/TrelloClone";
import './App.css'

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Navbar />
        <Routes>
          {/* <Route path="/vanillajs" element={SpotifyClone} />
          <Route path="/djangoapi" element={InstagramClone} /> */}
          <Route path="/reactjs" element={<TrelloClone />} />
        </Routes>
      </BrowserRouter>
      {history?.location?.pathname !== '/reactjs' && 
     <>
      <Intro />
      <Services />
      <Experience />
     </>
      }
    </div>
  );
}

export default App;