Implementasi Router Menggunakan react-router-dom

by

react-router-dom adalah library yang lebih dahulu dibandingkan hookrouter. Cukup mudah digunakan, namun dibandingkan dengan hookrouter, penulisan code lebih panjang.

Untuk instalasi gunakan perintah

npm i react-router-dom

Berikut contoh implementasi routing menggunakan react-router-dom

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

export default function App() {

  return (
    <Router>
      <div className="container">
        <div className="row">
            <h1 className="mt-3">Anime Collection</h1>
            <hr className="mb-3"/>
        </div>
        <div className="row">
            <div className="col-md-2">
                <nav>
                    <ul className="list-group">
                        <li className="list-group-item"><Link to="/">Home</Link></li>
                        <li className="list-group-item"><Link to="/animes">Anime</Link></li>
                        <li className="list-group-item"><Link to="/admin">Admin</Link></li>
                    </ul>
                </nav>
            </div>
            <div className="col-md-10">
              <Switch>
                <Route path="/animes"><Animes/></Route>
                <Route path="/admin"><Admin/></Route>
                <Route path="/"><Home/></Route>
              </Switch>
            </div>
        </div>
      </div> 
  </Router>
  );
}

function Animes(){
  return(
    <h1>Anime List</h1>
  ); 
}

function Admin(){
    return(
      <h1>Manage Anime</h1>
    ); 
}

function Home(){
    return(
      <h1>Home React Router</h1>
    ); 
}

Pembahasan Code

Seluruh content yang harus disimpan dalam tag <Router></Router>

<Router>
    <div className="container">
    <div className="row">
        <h1 className="mt-3">Anime Collection</h1>
        <hr className="mb-3"/>
    </div>
    <div className="row">
        ...
        ...
    </div> 
</Router>

Content yang akan ditampilkan menggunakan tag <Switch>.

<div className="col-md-10">
    <Switch>
      <Route path="/animes"><Animes/></Route>
      <Route path="/admin"><Admin/></Route>
      <Route path="/"><Home/></Route>
    </Switch>
</div>

Dapat Anda bandingkan dengan modul sebelumnya, penulisan code jadi lebih panjang.

Perhatikan juga, Anda tidak bisa menggunakan element <a href>, tetapi menggunakan element khusus yaitu <Link>

Sharing is caring:

Leave a Comment