Why does my code break when I take out Router?

61 views Asked by At

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')
);
1

There are 1 answers

2
Mohammad Mehrabi On BEST ANSWER

I think you are doing the deletion wrong.

This code should work correctly without errors:

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;

Or if the problem persists, check other components.