Single Page Applications (SPAs) are web applications that load a single HTML page and dynamically update that page as the user interacts with the app. This approach allows for a smoother user experience compared to traditional multi-page applications (MPAs), where each interaction often requires a full page reload.
Library to use for routing - https://reactrouter.com/en/main
npm i react-router-dom
import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Layout from "./pages/Layout";
import Home from "./pages/Home";
import Blogs from "./pages/Blogs";
import Contact from "./pages/Contact";
import NoPage from "./pages/NoPage";
export default function App() {
return (
<BrowserRouter>
<Routes>
<Route index element={<Home />} />
<Route path="blogs" element={<Blogs />} />
<Route path="contact" element={<Contact />} />
<Route path="*" element={<NoPage />} />
</Routes>
</BrowserRouter>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
Code from class
import './App.css'
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
function App() {
return <div>
<BrowserRouter>
<Link to="/">Allen</Link>
|
<Link to="/neet/online-coaching-class-11">Class 11</Link>
|
<Link to="/neet/online-coaching-class-12">Class 12</Link>
<Routes>
<Route path="/neet/online-coaching-class-11" element={<Class11Program />} />
<Route path="/neet/online-coaching-class-12" element={<Class12Program />} />
<Route path="/" element={<Landing />} />
</Routes>
</BrowserRouter>
</div>
}
function Landing() {
return <div>
Welcome to allen
</div>
}
function Class11Program() {
return <div>
NEET programs for Class 11th
</div>
}
function Class12Program() {
return <div>
NEET programs for Class 12th
</div>
}
export default App