Categories: ReactJS

Contoh penggunaan react router di react JS

Bismillaahirrohmaanirrohiim…

Setelah kita berhasil menginstall react JS, tentunya kita ingin mencoba membuat web dengan react JS ini.

Dalam web, kita sudah terbiasa mengenal yang namanya “LINK“, itu penting karena dapat digunakan untuk berpindah dari satu halaman ke halaman yang lain.

Nah, di react JS untuk membuat fitur tersebut ikuti langkah-langkah di bawah ini:

1. Buat project baru

Kalau sudah pernah punya project, bisa lanjut ke step berikutnya.

ketikkan di CMD

create-react-app belajar-router

tunggu sampai selesai, kemudian masuk ke projectnya

cd belajar-router

2. Install react router

Ketikkan perintah

npm install react-router-dom

tunggu sampai selesai

3. Jalankan project

Seperti biasa, ketikkan perintah

npm start

Nah, itu tadi cara install react router di react JS.
Jika sudah jalan dan tidak ada error, sekarang lanjut contoh kode membuat router di web.

Contoh membuat navigasi di react JS dengan react router

a. Buka folder project “belajar-router” menggunakan editor kesukaan (Sublime, VS Code, dll)
b. Buat folder “components” di dalam folder “src
c. Di dalam folder “components“, buatlah beberapa file di bawah ini:

Header.js

import React, { Component } from "react";
import { Link } from "react-router-dom";

class Header extends Component {
    state = {};
    render() {
        return (
            <div>
                <ul>
                    <li>
                        <Link to="/">Home</Link>
                    </li>
                    <li>
                        <Link to="/about">About</Link>
                    </li>
                    <li>
                        <Link to="/contact">Contacts</Link>
                    </li>
                </ul>
            </div>
        );
    }
}

export default Header;

Home.js

import React, { Component } from 'react';
import Header from "./Header";

class Home extends Component {
    state = {  }
    render() {
        return (
            <div>
                <Header />
                <h1>Home</h1>
                <p>Ini adalah halaman home</p>
            </div>
        );
    }
}

export default Home;

About.js

import React, { Component } from 'react';
import Header from "./Header";

class About extends Component {
    state = {  }
    render() {
        return (
            <div>
                <Header />
                <h1>About</h1>
                <p>Ini adalah halaman About</p>
            </div>
        );
    }
}

export default About;

Contact.js

import React, { Component } from 'react';
import Header from "./Header";

class Contact extends Component {
    state = {  }
    render() {
        return (
            <div>
                <Header />
                <h1>Kontak</h1>
                <p>Ini adalah halaman Kontak</p>
            </div>
        );
    }
}

export default Contact;

d. Buat file di dalam folder “src

routes.js

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';

import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

function routes() {
    return(
        <Router>
            <div>
                <Route exact path="/" component={Home} />
                <Route path="/about" component={About} />
                <Route path="/contact" component={Contact} />
            </div>
        </Router>
    );
}

export default routes;

e. Edit file index.js di dalam folder “src

import React from 'react';
import ReactDOM from 'react-dom';
import Router from './routes';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<Router />, document.getElementById('root'));

serviceWorker.unregister();

Setelah semua selesai dan di save, lihatlah browser yang telah dibuka dengan alamat http://localhost:3000.

Jika tidak ada error, berarti pembuatan navigasi di react JS telah berhasil.
Silahkan dicoba dan di edit sendiri untuk lebih memahami konsep navigasi di react JS.

Semoga bermanfaat.

Bagikan
rasupe

Share
Published by
rasupe

Recent Posts

Source code Template website sekolah dengan react js

Bismillaahirrohmaanirrohiim... Berikut ini source code yang dapat dimodifikasi untuk membuat front end website sekolah dengan…

7 hours ago

Subdomain pada cyberpanel tidak dapat diakses

Bismillaahirrohmaanirrohiim... Jika domain dan sub domainnya berada dalam satu vps cyberpanel, maka seringkali jadi tidak…

5 days ago

10 Aplikasi Kasir Terbaik di Indonesia (2025)

Bismillaahirrohmaanirrohiim... Dalam era digital saat ini, penggunaan aplikasi kasir (Point of Sale/POS) menjadi solusi penting…

6 days ago

Website di aapanel sering mati sendiri

Bismillaahirrohmaanirrohiim... Saat browsing-browsing saya seringkali melihat iklan aapanel, sekilas membuat penasaran sampai akhirnya saya mencoba…

1 week ago

Reset password cyberpanel via SSH

Bismillaahirrohmaanirrohiim... Berikut ini perintah untuk reset password admin cyberpanel melalui SSH command line. pastikan login…

1 week ago

Template Blogger Blogspot Gratis dan Bagus

Bismillaahirrohmaanirrohiim... Berikut ini beberapa template blogspot yang dapat anda gunakan secara gratis namun tampilannya bagus.…

2 months ago