Tanggal :October 25, 2020

Pindah Halaman di React Js dengan React Router Dom.

Spread the love

Pada tutorial sebelumnya kita telah mempelajari membuat Header , kali ini kita akan memulai untuk belajar berpindah halaman di react js.

Berpindah Halaman pada react js kali ini sangat mudah, kita akan menggunakan bantuan react router dom.

sebelum itu mari kita install react router dom dengan menggunakan package manager dengan perintah di bawah ini :

npm i react-router-dom

Setelah itu buat file About.js di folder pages yang telah kita buat, sehingga struktur folder kita akan seperti dibawah ini :

Copy code berikut di file about.js

import React, { Component } from “react”;
import Header from “../parts/Header”;
export default class About extends Component {
  render() {
    return (
      <>
        <Header></Header>
        <div class=”justify-content-center”>
          <h1>Ini About</h1>
          <a href=”/”>Go to Landing Page</a>
        </div>
      </>
    );
  }
}

Sedangkan untuk file landingPage.js copy dibawah ini :

import React, { Component } from “react”;
import Header from “../parts/Header”;
export default class About extends Component {
  render() {
    return (
      <>
        <Header></Header>
        <div class=”justify-content-center”>
          <h1>Ini About</h1>
          <a href=”/”>Go to Landing Page</a>
        </div>
      </>
    );
  }
}

Selanjutnya kita akan menggunakan react router dom di file app.js , copy code berikut dan paste di file app.js

import React from “react”;
import { BrowserRouter as Router, Route } from “react-router-dom”;
import “./App.css”;
import LandingPages from “./pages/LandingPages”;
import About from “./pages/About”;
function App() {
  return (
    <Router>
      <Route exact path=”/” component={LandingPages}></Route>
      <Route path=”/about” component={About}></Route>
    </Router>
  );
}

export default App;

Setelah itu jalankan project react js kita dengan perintah npm start, maka hasilnya akan seperti dibawah berikut.

oh iya , bagi yang tidak mengikuti seri belajar ini, namun membaca postingan ini perlu diketahui bahwa pada project ini menggunakan react bootstrap. alangkah baiknya ikuti seri sebelumnya dan selanjutnya. adapun list seri belajar ada dibawah ini :

  1. Membuat Project React Js Pertamamu !
  2. Pengenalan Lingkungan Kerja React js.
  3. Membuat Header dengan React Bootstrap di React js.
  4. Berpindah Halaman di React Js menggunakan React Router Dom.

Share

Leave a Reply

Your email address will not be published. Required fields are marked *