有沒有辦法在頁面上只留下一個組件和鏈接的內容？

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;