single component load in react router

October 27, 2022

I need to know how to avoid all the components to get loaded when starting the application.
Below is my app.js file. There I have used react-router. But it get loaded all the components when starting the application. But the requirement is only the particular component has to get loaded in that particular route. Help me to resolve this.

import "./App.css";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./Pages/Home";
import TollList from "./Pages/TollList";

function App() {
  return (
    <>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Home />}></Route>
          <Route path="/tolllist" element={<TollList />}></Route>
        </Routes>
      </BrowserRouter>
    </>
  );
}

export default App;

I tried the react-router for this

>Solution :

React creates a single page application. Look at this example of React Router V6. The URL displayed in the address bar always reflects the thing that they are viewing. When you click on the "About" link you can see that the URL changes to www.websitename.com/About. The empty "/" route is whatever you want the default route to be. If you clicked on the /tolllist route then the Home component will no longer be displayed and the tolllist will be shown instead.

React Router Docs