Bereaksi Router

Buat Aplikasi React tidak termasuk perutean halaman.

React Router adalah solusi paling populer.

Tambahkan React Router

Untuk menambahkan React Router di aplikasi Anda, jalankan ini di terminal dari direktori root aplikasi:

Struktur Folder

Untuk membuat aplikasi dengan beberapa rute halaman, pertama-tama mari kita mulai dengan struktur file.

Di dalam srcfolder, kami akan membuat folder bernama pagesdengan beberapa file:

src\pages\:

• Layout.js
• Home.js
• Blogs.js
• Contact.js
• NoPage.js

Setiap file akan berisi komponen React yang sangat mendasar.

Penggunaan Dasar

Sekarang kita akan menggunakan Router kita di index.jsfile kita.

import ReactDOM from "react-dom";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Layout from "./pages/Layout";
import Home from "./pages/Home";
import Blogs from "./pages/Blogs";
import Contact from "./pages/Contact";
import NoPage from "./pages/NoPage";

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="blogs" element={<Blogs />} />
          <Route path="contact" element={<Contact />} />
          <Route path="*" element={<NoPage />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

Contoh Dijelaskan

Kami membungkus konten kami terlebih dahulu dengan <BrowserRouter>.

Kemudian kami mendefinisikan kami <Routes>. Sebuah aplikasi dapat memiliki beberapa <Routes>. Contoh dasar kami hanya menggunakan satu.

<Route>s dapat bersarang. Yang pertama <Route>memiliki jalur / dan merender Layoutkomponen.

Nested <Route>s mewarisi dan menambahkan ke rute induk. Jadi blogspath digabungkan dengan parent dan menjadi /blogs.

Rute Homekomponen tidak memiliki jalur tetapi memiliki indexatribut. Itu menentukan rute ini sebagai rute default untuk rute induk, yaitu /.

Menyetel pathke *akan bertindak sebagai penampung semua untuk URL yang tidak ditentukan. Ini bagus untuk halaman kesalahan 404.

Halaman / Komponen

Komponen Layoutmemiliki <Outlet>dan <Link>elemen.

Render <Outlet>rute saat ini dipilih.

<Link> digunakan untuk mengatur URL dan melacak riwayat penelusuran.

Setiap kali kami menautkan ke jalur internal, kami akan menggunakan <Link> alih-alih <a href="">.

"Rute tata letak" adalah komponen bersama yang menyisipkan konten umum di semua halaman, seperti menu navigasi.

import { Outlet, Link } from "react-router-dom";

const Layout = () => {
  return (
    <>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/blogs">Blogs</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </nav>

      <Outlet />
    </>
  )
};

export default Layout;

const Home = () => {
  return <h1>Home</h1>;
};

export default Home;

const Blogs = () => {
  return <h1>Blog Articles</h1>;
};

export default Blogs;

const Contact = () => {
  return <h1>Contact Me</h1>;
};

export default Contact;

const NoPage = () => {
  return <h1>404</h1>;
};

export default NoPage;