Berpindah antar Halaman
Syarat
Sudah mengerjakan tugas membuat komponen
Install router
Ketik perintah ini pada terminal
yarn add react-router-dom
Membuat Komponen berisi Router
Bukalah file src/App.js lalu masukkan kode berikut ini:
import Layout from ‘./pages/layout.js’;
import TambahDonasi from ‘./pages/tambahDonasi.js’;
import Home from ‘./pages/home.js’;
import { BrowserRouter, Routes, Route } from “react-router-dom”;
function App() {
return (
<BrowserRouter>
<Routes>
<Route path=”/” element={<Layout />} >
<Route index element={<Home />} />
<Route path=”tambahDonasi” element={<TambahDonasi />} />
</Route>
</Routes>
</BrowserRouter>
);
}
export default App;
Keterangan:
- import Layout from ‘./pages/layout.js’ -> kode ini digunakan untuk mengimport komponen Layout
- import TambahDonasi from ‘./pages/tambahDonasi.js’ -> kode ini digunakan untuk mengimport komponen TambahDonasi
- import Home from ‘./pages/home.js’ -> kode ini digunakan untuk mengimport komponen Home
- <Route path=”/” element={<Layout />} > -> ini rute yang digunakan untuk menampilkan komponen Layout
- <Route index element={<Home />} /> -> index ini berarti halaman default yang ditampilkan
Menambahkan Link pada Layout
Bukalah file src/pages/layout.js lalu ganti isinya dengan kode berikut ini:
import { Outlet, Link } from “react-router-dom”;
function Layout(){
return (
<div>
<div class=”container-fluid”>
<div class=”row content”>
<div class=”col-sm-2 sidenav”>
<center><h3> Donasi</h3></center>
<ul class=”nav nav-pills nav-stacked”>
<li><Link to=”/”>Home</Link></li>
<li><Link to=”tambahDonasi”>Tambah</Link></li>
</ul>
</div>
<div class=”col-sm-9″>
<Outlet />
</div>
</div>
</div>
<footer class=”container-fluid”>
<p>Footer Text</p>
</footer>
</div>
);
}
export default Layout;
Keterangan:
- <Link to> digunakan untuk pergi ke path internal
- <Outlet /> digunakan sebagai tempat tampilnya halaman yang dituju
Jalankan Aplikasi
Buka terminal lalu ketik perintah ini:
yarn start