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.