How to create multiple independent pages in react without loading all components

Question

This might be a stupid question. I searched for an answer and I all get is router solutions. I have created a react SPA and I want to create a separate independent page for admin that does not get loaded along with the main app and vice versa. How can I do this? If enter this in the url bar http://localhost:3000/admin.html , It still loads the main app no matter what.

Answer 1

you can still use router and load only the components needed using lazy . From react website

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route path="/about" component={About}/>
      </Switch>
    </Suspense>
  </Router>
);