Table of Contents
ReactJS – 03. Router
Installasi
Buka terminal, lalu masuk ke direktori installasi react misal my-app jelankan perintah berikut.
npm i -D react-router-dom
Folder Struktur
Selanjutnya kita akan membuat direktori pages dan beberapa file baru dengan struktur sebagai berikut.
src\pages\:
- Layout.js
- Home.js
- Blogs.js
- Contact.js
- NoPage.js
Layout.jsx
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;
Home.jsx
const Home = () => {
return <h1>Home</h1>;
};
export default Home;
Blog.jsx
const Blogs = () => {
return <h1>Blog Articles</h1>;
};
export default Blogs;
Contact.jsx
const Contact = () => {
return <h1>Contact Me</h1>;
};
export default Contact;
NoPage.jsx
const NoPage = () => {
return <h1>404</h1>;
};
export default NoPage;
Mendefinisikan Route
Buka file src/index.js
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 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 />);
Jalankan… hasilnya sebagai berikut.
Jelek Sekali bukan.. untuk mempercatiknya anda bisa menggunakan Bootstrap atau Tailwind
Intallasi Bootstrap
npm install bootstrap