Implementasi Routing Menggunakan hookrouter

hookrouter adalah library routing yang penggunaanya cukup jelas dan mudah.

Untuk instalasi library, pada direktori project, jalankan perintah

npm i hookrouter

Contoh Implementasi

File ini akan menampilkan halaman dengan 3 link, yaitu Home, Anime dan Admin. Dimana ketika link tersebut diclick, maka content akan diubah sesuai dengan link yang dimaksud.

import React from 'react';
import {useRoutes} from 'hookrouter';


export default function App() {
  const routes = {
    '/' :()=><Home/>,
    '/animes' :()=> <Animes/>,
    '/admin' :()=> <Admin/>,
   };
  const routeResults = useRoutes(routes);

  return (
  <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"><a href="/">Home</a></li>
                    <li className="list-group-item"><a href="/animes">Anime</a></li>
                    <li className="list-group-item"><a href="/admin">Admin</a></li>
                </ul>
            </nav>
        </div>
        <div className="col-md-10">
          {routeResults}
        </div>
    </div>
  </div>    

  );
}

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

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

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

Pembahasan Code

Untuk mendefinisikan route. Formatnya adalah route : component. Untuk kesederhanaan tutorial, digunakan fungsional component, bukan component class.

  const routes = {
    '/' :()=><Home/>,
    '/animes' :()=> <Animes/>,
    '/admin' :()=> <Admin/>,
   };
  const routeResults = useRoutes(routes);

Link route menggunakan element <a href>.

<ul className="list-group">
    <li className="list-group-item"><a href="/">Home</a></li>
    <li className="list-group-item"><a href="/animes">Anime</a></li>
    <li className="list-group-item"><a href="/admin">Admin</a></li>
</ul>

Content component yang akan ditampilkan.

<div className="col-md-10">
    {routeResults}
</div>

Fungsional component untuk mengubah isi content.

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

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

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