Contoh Penggunaan React Router Di React Js

Bismillaahirrohmaanirrohiim…

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

Dalam web, kita sudah terbiasa mengenal yang namanya “LINK“, itu penting alasannya sanggup dipakai untuk berpindah dari satu halaman ke halaman yang lain.

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

1. Buat project baru

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

ketikkan di CMD

create-react-app belajar-router

tunggu hingga selesai, lalu masuk ke projectnya

cd belajar-router

2. Install react router

Ketikkan perintah

npm install react-router-dom

tunggu hingga 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, kini lanjut tumpuan arahan menciptakan router di web.

Contoh menciptakan navigasi di react JS dengan react router

a. Buka folder project “belajar-router” memakai 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 yaitu 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 yaitu 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 yaitu 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 final 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.

Sumber https://rasupe.com

Mari berteman dengan saya

Follow my Instagram _yudha58

Baca juga:

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: