为什么当我取出路由器时我的代码会中断？

Question

现有代码呈现。然而，当我从第 2 行将

Router

作为导入删除时，即使它没有被使用，它也会中断。

更正：当我删除路由器时，页面仍然呈现。但是，它只显示一个空白页面。当我检查它时，我不再在 div id="root" 标签中得到任何内容。

当我编译时，我当然得到“第 2:27 行：‘Router’已定义但从未使用 no-unused-vars”

这是为什么呢？或者有人有见解吗？

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import HomePage from './HomePage';
import PlanTripPage from './PlanTripPage';
import NavBar from './NavBar';
import ItineraryPage from './ItineraryPage';
import './App.css';

function App() {
  return (
    <div>
      <NavBar />
      <Routes>
        <Route exact path="/" element={<HomePage />} />
        <Route path="/plan-trip" element={<PlanTripPage />} />
        <Route path="/itinerary" element={<ItineraryPage />} />
      </Routes>
    </div>
  );
}

export default App;

这是我的索引文件。

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
import './index.css';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

Answer 1

我认为你的删除操作是错误的。

这段代码应该可以正常工作，没有错误：

import React from 'react';
import { Routes, Route } from 'react-router-dom';
import HomePage from './HomePage';
import PlanTripPage from './PlanTripPage';
import NavBar from './NavBar';
import ItineraryPage from './ItineraryPage';
import './App.css';

function App() {
  return (
    <div>
      <NavBar />
      <Routes>
        <Route exact path="/" element={<HomePage />} />
        <Route path="/plan-trip" element={<PlanTripPage />} />
        <Route path="/itinerary" element={<ItineraryPage />} />
      </Routes>
    </div>
  );
}

export default App;

或者如果问题仍然存在，请检查其他组件。