Tutorial Belajar Reactjs #7: Berpindah Halaman pada React js dengan menggunakan react Router

 

materi tutorial kali ini kita akan mempelajari bagaimana berpindah halaman pada react js dengan menggunakan library react Router, materi ini merupakan materi lanjutan dari tutorial sebelum nya tentang, Tutorial Belajar Reactjs #6: Membuat Project React js full library. agar dapat memahami materi pada tutorial ini ada baiknya pembaca sekalian bisa membaca materi pada tutorial sebelumnya.

pada sebuah website umunya harus memiliki button atau tombol navigasi, untuk mengarahkan user, dalam memilih kontent mana yang akan mereka cari, misalkan sebuah website perusahaan, jika user ingin mengetahui profile dari perusaahan tersebut, maka user harus memilih button navigasi profile, yang mana ketika navigasi ini di pilih atau di klik oleh user , maka website akan menampilkan konten profile perusahaan, dan lain sebagai nya.

dan pada react js untuk berpindah halam atau menampilkan halaman atau kontent yang di pilih oleh user kita bisa menggunakan react router, dengan pemahaman simpelnya kita menyiamkan link yang menuju komponent yang akan di pilih oleh user.  agar lebih jelas langsung saja kita ke materi tutorial nya.

1. Buat project Baru

 Pertama buka project react js full lybrary yang telah kita buat pada tutorial sebalumnya, jika pembaca belum memiliki project nya. bisa juga ikuti tutorial sebelumnya. jalan kan terlebih dahulu project nya untuk memastikan project tidak ada error.

Runing Program

selanjutnya kita akan memberikan menu navigasi pada project yang telah kita buta sebelumnya yang mana pada menu navigasi ini akan memuat beberapa menu seperti,

• Home
• Profile
• Contact

ketika user mimilih atau mengklik menu navigasinya, maka user akan berpindah kehalaman yang dipilih. maka kita perlu membuat beberapa component yaitu Home, Profile, Contact, dan Menu. agar struktur project yang kita buat lebih rapi, kita perlu mengelompokan component yang akan kita buat pada folder tersendiri, 

buat folder bernama component dalam folder src pada project kita, lalu di dalam folder component buat lagi folder sesuia dengan nama component yang akan kita buat, agar lebih jelas bisa lihat gambar berikut ini.

Struktur Folder

Buka file App.js yang terdapat pada folder src, kita perlu melakukan sedikit perubahan pada file App.js dan app .css .nya dan menambahkan style untuk memisahkan antara header dan content nya. lalu ubah menjadi sperti berikut ini.

File App.js

import './App.css';

function App() {
  return (
    <div >
      <div className="app-header">
        .Untuk Component Menu.
      </div>
      <div className="app-content">
        . Utunk Component Content.
      </div>
    </div>
  );
 }

 export default App;

File App.css

    body {
        font-family: Helvetica, sans-serif;
        background-color: #f4f4f4;
    }
    
    a {
        color: #fff;
    }
    
    .app-header {
        width: 100%;
        height: auto;
    }
    
    .app-content {
        padding: 50px;
    }

NOTES:

Pada File App.Js , Line 1 kita menggimport file dari App.css, agar semua style yang terdapat pada file app.css dapat di gunakan pada component App, hal ini juga kita lakukan untuk septiap component nya, agar lebih mempermudah kita ketika hendak melakukan perubahan pada style component yang kita buat.

2. Membuat Component Menu

karna kita akan membuat navigasi untuk berpindah halaman pada react js, yang pertama perlu kita buat adalah component menu, pada folder menu, buat sebuah file baru dengan nama Menu.js dan Menu.css Untuk style dari menu nya, untuk isi dari component menu seperti berikut ini.

File Menu.js

import React, { Component } from 'react';
import './Menu.css';

class Menu extends Component {
    render() {
        return (
            <div>
                <header className="header">
                    <a href="https://www.akscoding.com" className="logo">My Tutorial</a>
                    <input className="menu-btn" type="checkbox" id="menu-btn" />
                    <label className="menu-icon" for="menu-btn"><span className="navicon"></span></label>
                    <ul className="menu">
                        <li><a href="#work">Home</a></li>
                        <li><a href="#about">Profile</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </header>
            </div>
        );
    }
}

export default Menu;

File Menu.css

/* header */

.header {
    background-color: #30475e;
    box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, .1);
    position: fixed;
    width: 100%;
    z-index: 3;
    margin-bottom: 100px;
}

.header ul {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    background-color: #30475e;
}

.header li a {
    display: block;
    padding: 20px 20px;
    text-decoration: none;
    font-weight: bold;
}

.header li a:hover,
.header .menu-btn:hover {
    background-color: #222831;
}

.header .logo {
    display: block;
    float: left;
    font-size: 2em;
    padding: 10px 20px;
    text-decoration: none;
}


/* menu */

.header .menu {
    clear: both;
    max-height: 0;
    transition: max-height .2s ease-out;
}


/* menu icon */

.header .menu-icon {
    cursor: pointer;
    display: inline-block;
    float: right;
    padding: 28px 20px;
    position: relative;
    user-select: none;
}

.header .menu-icon .navicon {
    background: #333;
    display: block;
    height: 2px;
    position: relative;
    transition: background .2s ease-out;
    width: 18px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
    background: #333;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;
}

.header .menu-icon .navicon:before {
    top: 5px;
}

.header .menu-icon .navicon:after {
    top: -5px;
}


/* menu btn */

.header .menu-btn {
    display: none;
}

.header .menu-btn:checked~.menu {
    max-height: 240px;
}

.header .menu-btn:checked~.menu-icon .navicon {
    background: transparent;
}

.header .menu-btn:checked~.menu-icon .navicon:before {
    transform: rotate(-45deg);
}

.header .menu-btn:checked~.menu-icon .navicon:after {
    transform: rotate(45deg);
}

.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:after {
    top: 0;
}


/* 48em = 768px */

@media (min-width: 48em) {
    .header li {
        float: left;
    }
    .header li a {
        padding: 20px 30px;
    }
    .header .menu {
        clear: none;
        float: right;
        max-height: none;
    }
    .header .menu-icon {
        display: none;
    }
}

3. Import Component

selanjutnya import component menu kedalam component app.js pada bagian paling atas, atau di bawah Import app.css dengan cara seperti berikut,

import Menu from './component/menu/Menu';

dan letakan pada bagian yang telah kita beri komentar sebelumnya pada line 7. untuk lebih jelas bisa lihat gambar berikut.

Import Component Menu.js

lalu coba jalan kan, pastikan mengikuti langkah di atas dengan benar, jika tidak terjadi kesalahan maka hasil running program nya seperti berikut ini

Hasil Running 

4. Membuat Component Home, Profile, Contact

Component Home
selanjutnya buat file baru di folder Home dan tambahkan dua file dengan nama Home.js dan Home.css

File Home,js

import React, { Component } from 'react';
import './Home.css';

class Home extends Component {
    render() {
        return (
            <div className="card">
                <div className="container">
                    <div className="Titel">
                        Home
                    </div>
                    <div className="conten">
                        Selamat Datang Di <b>https://www.akscoding.com/</b>
                    </div>
                </div>
            </div>
        );
    }
}

export default Home;

File Home,css

.card {
    margin-top: 50px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;
    background-color: #ffffff;
    width: 100%;
}

.container {
    padding: 12px 16px;
}

.Titel {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 35px;
    font-weight: bold;
    color: #303030;
    text-align: center;
    margin-bottom: 10px;
}

.content {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 22px;
    color: #303030;
}

lalu Import juga Component Home  pada App js. dengan cara yang sama pada Step no.3,  seperti gambar Berikut ini

Import Component Home.js

lalu simpan, dan coba jalankan lagi project nya , maka hasilnya akan seperti gambar berikut ini.

Hasil Running Program

Component Profile
Buat file baru dalam folder Profile dan tambahkan file Profile.js dan Profile.css, dan tuliskan koding berikut ini.

File Profile.js

import React, { Component } from 'react';
import './Profile.css';

class Profile extends Component {
    render() {
        return (
            <div className="card">
                <div className="container">
                    <div className="Titel">
                        Profile
                    </div>
                    <div className="conten">
                        <b>https://www.akscoding.com/</b> <br />
Blog yang memuat tutorial programing bahasa indonesia
                   </div>
                </div>
            </div>
        );
    }
}

export default Profile;

File Profile.css

.card {
    margin-top: 50px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;
    background-color: #ffffff;
    width: 100%;
}

.container {
    padding: 12px 16px;
}

.Titel {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 35px;
    font-weight: bold;
    color: #303030;
    text-align: center;
    margin-bottom: 10px;
}

.content {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 22px;
    color: #303030;
}

lalu save dan import juga component Profile kedalam component App.js,

Component Conctact
Buat file baru dalam folder Contact dan tambahkan file Contact .js dan Contact.css, dan tuliskan koding berikut ini.

File Contact.js

import React, { Component } from 'react';
import './Contact.css';

class Contact extends Component {
    render() {
        return (
            <div className="card">
                <div className="container">
                    <div className="Titel">
                        Contact
                    </div>
                    <div className="conten">
                        <b>Developer :</b> AK Studio <br />
                        <b>Webiste   :</b> https://www.akscoding.com/ <br />
                        <b>Email     :</b> dev.akstudio@gmail.com <br />
                        <b>Owner     :</b> Maulana S H
                    </div>
                </div>
            </div>
        );
    }
}

export default Contact;

File Contact.css

.card {
    margin-top: 50px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;
    background-color: #ffffff;
    width: 100%;
}

.container {
    padding: 12px 16px;
}

.Titel {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 35px;
    font-weight: bold;
    color: #303030;
    text-align: center;
    margin-bottom: 10px;
}

.content {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 22px;
    color: #303030;
}

lalu save dan import juga component Contact kedalam component App.js, secara keseluruhan jika component diatas telah di import kedalam file app.js. maka akan jadi seperti gambar berikut ini.

File App.js

dan ketika di jalankan maka hasil dari seluruh component yang kita buat seperti gambar berikut ini

Hasil running Program

kita masih merender semua component yang telah kita buat dalam satu halaman, bagaimana cara kita agar memimsahkan component tersebut sesuia, dengan apa yang di pilih pada component menu navigasi.

maka kita perlu menggunakan  react-router-dom, disini react router dom berfungsi untuk memisahkan semua component yang telah kita buat sesuai dengan pacth atau link yang kita pilih pada component menu, agar ketika kita memilih menu home pada navigasi nya, hanya component home yang di tampilkan dan seterusnya.

5. Instalasi react-router-dom

buka terminal atau CMD, lalu arahkan ke dalam pacth atau direktori tempat kita menyimpan project react nya. lalu ketikan perintah berikut ini.

Notes.

• Harus Ada Koneksi Internet
• Pada tutorial ini saya menggunakan terminal CMD dari Gitbash, dan NPM package Manager 
• Buka CMD dan arahkan pada pacth atau direktori project react js
• Lalu Ketikan Perintah Berikut ini pada CMD, lalu Tekan enter
• Setelah Proses Instalasi Selesai, Stop dan Jalankan Lagi Program nya agar library react-router-dom nya terload pada project 

Perintah Install

//untuk-Pengguna-NMP
npm install react-router-dom

//Untuk-Pengguna-YARN
yarn add react-router-dom.

untuk lebih jelas nya bisa lihat gambar berikut ini.

Proses Instalasi

jika pada saat proses instalasi terdapat pesan warning pada CMD nya abaikan saja, itu hanya notif untuk kita agar meng update bebrapa library yang saat ini belum kita gunakan.

selanjutnya buka file App.js, lalu kita perlu sedikit merubah koding pada file App.js ini menjadi seperti berikut ini.

File App.js

import './App.css';
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Menu from './component/menu/Menu'
import Home from './component/home/Home'
import Profile from './component/profile/Profile'
import Contact from './component/contact/Contact'

function App() {
  return (
    <Router >
      <div className="app-header">
        <Menu />
      </div>
      <Switch>
        <div className="app-content">
          <Route path="/" exact component={Home} />
          <Route path="/profile" exact component={Profile} />
          <Route path="/contact" exact component={Contact} />
        </div>
      </Switch>
    </Router>
  );
}

export default App;

lalu kita juga perlu merubah koding pada file menu.js nya, buka file Menu.js. dan ubah menjadi seperti beriku ini.

File Menu.js

import React, { Component } from 'react';
import { Link } from "react-router-dom";
import './Menu.css';

class Menu extends Component {
    render() {
        return (
            <div>
                <header className="header">
                    <a href="https://www.akscoding.com" className="logo">My Tutorial</a>
                    <input className="menu-btn" type="checkbox" id="menu-btn" />
                    <label className="menu-icon" for="menu-btn"><span className="navicon"></span></label>
                    <ul className="menu">
                        <li><Link to="/">Home</Link></li>
                        <li><Link to="/profile">Profile</Link></li>
                        <li><Link to="/contact">Contact</Link></li>
                    </ul>
                </header>
            </div>
        );
    }
}

export default Menu;

lalu simpan dan jalankan program nya maka, kita telah berhasil berpindah halaman pada react js , dan yang sebelumnya kita merender semua component yang telah kita buat menjadi satu halaman, ketika menu navigasi di pilih maka component yang akan ditampilkan akan sesuai dengan apa yang kita pilih . seprty gambar berikut ini.

Hasil Running Program

Sampai disini kita telah berhasil mempelajari bagaimana cara berpindah halaman pada react js dengan menggunakan react router. 

untuk lebih memahahami lagi tentang react js, bisa lanjut ke Tutorial Part #8.

Part#8 : Map dan filter array pada react js

Jika ada masukan dan saran mengenai postingan ini bisa berikan di kolom Komentar..

Sekian Dan Terima kasih...

#Happy Coding

#Keyword Penelusuran

• Belajar ReactJs 
• Tutorial ReactJs
• Jenis Component pada React JS
• Class Component Pada Reactjs
• Cara memberi style pada component react js
• Cara Buat Project react js
• Berpindah Halaman pada react js
• cara buat menu Navigasi pada react js
• Cara memisahkan component pada react js

Share this post