The existing code renders. However, when I remove Router from line 2 as an import, even though it's not being used, it breaks.
Correction: The page still renders when I remove Router. However, it just displays a blank page. When I inspect it, I no longer get anything in the div id="root" tags.
When I compile, of course I get "Line 2:27: 'Router' is defined but never used no-unused-vars"
Why is this? Or does anyone have any insight?
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;
Here is my index file.
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')
);
I think you are doing the deletion wrong.
This code should work correctly without errors:
Or if the problem persists, check other components.