Eventloop:
Synchronous:
Assynchronous:
React
React Components:
Home.js
const Home = () => {
return <h1>This is a Home page</h1>;
};
export default Home;
Blog.js
const Home = () => {
return <h1>This is a Home page</h1>;
};
export default Home;
Contact.js
const Contact = () => {
return <h1>Contact Me @ [email protected]</h1>;
};
export default Contact;
Nopage.js
const NoPage = () => {
return <h1>404</h1>;
};
export default NoPage;
Index.js
import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Layout from "./Layout";
import Home from "./Home";
import Blogs from "./Blogs";
import Contact from "./Contact";
import NoPage from "./NoPage";
export default function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
<Route path="blogs" element={<Blogs />} />
<Route path="contact" element={<Contact />} />
<Route path="*" element={<NoPage />} />
</Route>
</Routes>
</BrowserRouter>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
Layout.js:
import { Outlet, Link } from "react-router-dom";
const Layout = () => {
return (
<>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/blogs">Blogs</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
<Outlet />
</>
)
};
export default Layout;
