Jumat, 18 Desember 2020

Cara Membuat Router pada React JS

Cara Membuat Router pada React JS

Pertama, gunakan VS Code untuk membuka folder yang akan diinstall React.

ketik dan enter ini pada terminal VS Code:

npx create-react-app demo-app

 pindah direktori dengan mengetik ini di terminal:

cd demo-app

Direktori akan berpindah ke folder demo-app

selanjutnya, install react-router-dom dengan mengetik ini pada terminal

npm install react-router-dom

pada folder demo-app, cari folder src, kemudian pilih file App.js , pastekan kode ini di file tersebut:

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";
export default function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}
function Home() {
  return <h2>Home</h2>;
}
function About() {
  return <h2>About</h2>;
}
function Users() {
  return <h2>Users</h2>;
}

Selamat, kalian berhasil melakukan routing!


EmoticonEmoticon