BELAJAR MEMBUAT LINK NAVIGASI DENGAN REACT-ROUTER-DOM DI REACT JS

Membuat navigasi dengan react js:

install apps baru dengan nama navigasiku

- Setelah terinstall masuk ke apps navigasiku

- Install react-router-dom dan bootstrap

npm install react-router-dom bootstrap

- Pastikan di package.json react-router-dom dan boostrap sudah terinstall

{

  "name": "navigasi",

  "version": "0.1.0",

  "private": true,

  "dependencies": {

    "@testing-library/jest-dom": "^5.17.0",

    "@testing-library/react": "^13.4.0",

    "@testing-library/user-event": "^13.5.0",

    "bootstrap": "^5.3.3",

    "react": "^18.3.1",

    "react-dom": "^18.3.1",

    "react-router-dom": "^6.23.1",

    "react-scripts": "5.0.1",

    "web-vitals": "^2.1.4"

  },

- buat Home.js

import React from 'react'

const Home = () => {

  return (

    <div>

      <h2>Halaman Utama</h2>

    </div>

  )

}

export default Home

- buat Kontakkami.js

import React from 'react'

const Kontakkami = () => {

  return (

    <div>

      <h2>Ini adalah kontak kami</h2>

    </div>

  )

}

export default Kontakkami

- buat Tentangkami.js

import React from 'react'

const Tentangkami = () => {

  return (

    <div>

      <h2>Tentang kami</h2>

    </div>

  )

}

export default Tentangkami

- Setting App.js

import { BrowserRouter, Routes, Route } from "react-router-dom";

import Home from "./Home";

import Tentangkami from "./Tentangkami";

import Kontakkami from "./Kontakkami";

function App() {

  return (

    <BrowserRouter>

      <Routes>

        <Route path="/" element={<Home />}></Route>

        <Route path="/Tentangkami" element={<Tentangkami />}></Route>

        <Route path="/Kontakkami" element={<Kontakkami />}></Route>

      </Routes>

    </BrowserRouter>

  );

}

export default App;

- Buat Nav.js

import React from 'react'

import 'bootstrap/dist/css/bootstrap.min.css'

import { Link } from 'react-router-dom'

const Nav = () => {

  return (

    <div>

      <nav class="navbar navbar-expand-lg bg-body-tertiary">

        <div class="container-fluid">

            <Link class="navbar-brand" to="/">Websiteku</Link>

            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">

            <span class="navbar-toggler-icon"></span>

            </button>

            <div class="collapse navbar-collapse" id="navbarText">

            <ul class="navbar-nav me-auto mb-2 mb-lg-0">

                <li class="nav-item">

                <Link class="nav-link active" aria-current="page" to="/">Home</Link>

                </li>

                <li class="nav-item">

                <Link class="nav-link active" aria-current="page" to="Kontakkami">Kontak</Link>

                </li>

                <li class="nav-item">

                <Link class="nav-link active" aria-current="page" to="/Tentangkami">Tentang kami</Link>

                </li>

            </ul>

            </div>

        </div>

        </nav>

    </div>

  )

}

export default Nav

- Set App.js

import { BrowserRouter, Routes, Route } from "react-router-dom";

import Home from "./Home";

import Tentangkami from "./Tentangkami";

import Kontakkami from "./Kontakkami";

import Nav from "./Nav";

function App() {

  return (

    <BrowserRouter>

    <Nav />

      <Routes>

        <Route path="/" element={<Home />}></Route>

        <Route path="/Tentangkami" element={<Tentangkami />}></Route>

        <Route path="/Kontakkami" element={<Kontakkami />}></Route>

      </Routes>

    </BrowserRouter>

  );

}

export default App;