Memahami tentang React Outlet dengan penghalaan yang betul

Artikel ini akan meneroka cara saluran keluar React berfungsi dan asas penghalaan dalam aplikasi React. Pertama sekali kita perlu memahami asas penghalaan

Memahami Asas

Sebelum menyelami , mari pastikan kami mempunyai pemahaman yang kukuh tentang Penghala Reaksi.

• Apakah itu React Router? React Router ialah perpustakaan JavaScript popular yang membolehkan navigasi antara paparan berbeza dalam aplikasi React. Ia membolehkan anda menentukan laluan, yang memetakan URL kepada komponen tertentu. Lagi..

• Mengapa penghalaan penting? Penghalaan adalah penting untuk membina aplikasi satu halaman (SPA) di mana pengguna boleh menavigasi tanpa muat semula halaman penuh, mewujudkan pengalaman yang lebih lancar dan dinamik.

Sekarang mari kita selami React Outlet

Apakah React Outlet?

komponen ialah pemegang tempat dalam komponen laluan induk yang memberitahu Penghala Reaksi tempat untuk memberikan laluan anak. Ia bertindak seperti bekas dinamik yang mengubah kandungannya berdasarkan URL semasa.
Ciri ini membantu dalam mengurus reka letak yang kompleks di mana sebahagian halaman kekal konsisten, seperti pengepala atau bar sisi, manakala bahagian lain berubah secara dinamik berdasarkan laluan.

Bagaimanakah ia berfungsi: Apabila URL sepadan dengan laluan induk, Penghala React mencari dalam komponen ibu bapa itu. Ia kemudiannya memaparkan komponen laluan kanak-kanak yang sepadan ke dalam itu.

Mari Laksanakan Outlet dengan penghalaan tindak balas yang betul untuk Aplikasi React

import React from "react";

// import components
import AllRoutes from "./routes";

// component
const App = () => {
  return (
    <>

      <AllRoutes />
    </>
  );
};
export default App;

Komponen AllRoutes ini mentakrifkan sistem penghalaan untuk aplikasi React menggunakan react-router-dom, yang mengendalikan navigasi antara halaman berbeza dalam apl web React. Berikut ialah pecahan terperinci kod

import React from "react";

// import components
import AllRoutes from "./routes";

// component
const App = () => {
  return (
    <>

      <AllRoutes />
    </>
  );
};
export default App;

Mengimport Pakej

Penghala Pelayar: Komponen ini membolehkan penghalaan dalam penyemak imbas. Ia menggunakan API sejarah HTML5 untuk memastikan UI selari dengan URL.
Outlet, Laluan, Laluan: Komponen ini mentakrifkan dan mengendalikan pelbagai laluan (atau halaman) dalam aplikasi.
Suspense: Suspens digunakan untuk mengendalikan komponen yang dimuatkan dengan malas. Ia memaparkan komponen sandaran (dalam kes ini, pemuat tersuai) semasa komponen sedang dimuatkan.
malas: Fungsi ini membolehkan pemisahan kod dengan malas memuatkan komponen hanya apabila ia diperlukan, meningkatkan prestasi apl dengan mengurangkan saiz berkas awal.
Pemuat: Ini ialah komponen tersuai yang menunjukkan penunjuk pemuatan semasa komponen sedang dimuatkan dengan malas.
ProtectedRoute: Komponen tersuai ini memastikan bahawa laluan tertentu hanya boleh diakses oleh pengguna yang dibenarkan, menguatkuasakan keselamatan.
Laluan Root (/): Laluan ini adalah untuk laluan akar aplikasi kami. Ia memaparkan komponen Log Masuk.

Mengimport Laluan Laluan

Aplikasi mengimport laluan yang dipratentukan (cth., papan pemuka, homePath, loginPath, rootPath) daripada fail berasingan (routePaths). Ini menjadikan kod lebih mudah untuk diselenggara dan mengelakkan laluan laluan pengekodan keras dalam komponen.

Menentukan Laluan dalam AllRoutesComponent

Fungsi utama, AllRoutesComponent, mentakrifkan cara laluan berbeza dalam apl dikendalikan:
: Membungkus struktur penghalaan dan mengurus navigasi penyemak imbas.
: Komponen ini memegang semua laluan yang ditetapkan bagi aplikasi.
: Mentakrifkan satu laluan. Prop laluan mentakrifkan corak URL dan prop elemen menentukan komponen untuk dipaparkan untuk laluan itu.

• Laluan akar (rootPath) berfungsi sebagai bekas untuk laluan kanak-kanak.

• Laluan indeks memaparkan Log Masuk secara lalai apabila pengguna melawat laluan /.

• Laluan /login turut memaparkan Komponen Masuk.

• Laluan seperti /home dan /dashboard dibungkus dalam komponen ProtectedRoute, memastikan hanya pengguna yang dibenarkan boleh mengakses halaman ini.

: Ini membenarkan memaparkan laluan bersarang. Mana-mana laluan anak (seperti /log masuk, /home) dipaparkan dalam laluan induk (rootPath).

Apakah Laluan Dilindungi?

Sesetengah laluan (seperti homePath dan papan pemuka) bersarang di dalam elemen ProtectedRoute. Ini bermakna pengguna mesti memenuhi syarat tertentu (seperti log masuk) untuk mengakses halaman tersebut. Jika pengguna tidak dibenarkan, komponen ProtectedRoute biasanya mengubah hala mereka ke halaman log masuk atau halaman ralat.
Berikut ialah kod laluan Dilindungi

// import packages

import { BrowserRouter, Outlet, Route, Routes } from "react-router-dom";
import React, { Suspense, lazy } from "react";
import {
  dashboard,
  homePath,
  loginPath,
  rootPath
} from "./routePaths";

import Loader from "../components/loader";
import ProtectedRoute from "./protectedRoute";

// import route paths

const LoginComponent = lazy(() => import("../pages/login"));
const HomeComponent = lazy(() => import("../pages/home"));
const RouteNotFoundComponent = lazy(() => import("../pages/pageNotFound"));

const DashboardComponent = lazy(() => import("../pages/dashboard/"));

const AllRoutesComponent = () => {
  return (
    <Suspense fallback={<Loader />}>
      <BrowserRouter>
        <Routes>
          <Route path={rootPath} element={<Outlet />}>
            <Route index element={<LoginComponent />} />
            <Route path={loginPath} element={<LoginComponent />} />
            <Route element={<ProtectedRoute />}>
              <Route path={homePath} element={<HomeComponent />} />
              <Route path={dashboard} element={<DashboardComponent />} />
            </Route>
            <Route path="*" element={<RouteNotFoundComponent />} />
          </Route>
        </Routes>
      </BrowserRouter>
    </Suspense>
  );
};

export default AllRoutesComponent;

Penjelasan tentang kod

• Mengimport Pakej

React, { useEffect }: React ialah pakej teras untuk membina UI dan useEffect ialah cangkuk yang menjalankan kesan sampingan dalam komponen berfungsi. Di sini, useEffect digunakan untuk mengendalikan pengalihan jika pengguna tidak disahkan.
useNavigate: Cangkuk ini dari react-router-dom mendayakan navigasi program. Ia digunakan untuk mengubah hala pengguna apabila mereka tidak disahkan.
Outlet: Ini ialah pemegang tempat untuk laluan bersarang di dalam laluan yang dilindungi. Ia membenarkan laluan kanak-kanak rendering secara dinamik.
BaseLayout: Komponen ini membungkus laluan yang dilindungi dengan reka letak, memberikan rupa dan struktur yang konsisten untuk halaman yang dilindungi.

• Takrif Komponen

useNavigate(): Cangkuk ini membolehkan menavigasi ke laluan yang berbeza. Dalam kes ini, ia digunakan untuk menavigasi ke rootPath jika pengguna tidak disahkan.
isAuthenticated dan pengguna: Nilai ini dikodkan keras buat masa ini tetapi boleh ditetapkan secara dinamik, biasanya dengan menyemak beberapa keadaan pengesahan (seperti token JWT, data sesi, dll.) daripada keadaan global atau konteks.
isAuthenticated: Bendera yang menentukan sama ada pengguna disahkan. Jika palsu, pengguna diubah hala.
pengguna: Pengguna log masuk semasa. Nilai ini boleh diambil secara dinamik daripada konteks atau keadaan global, tetapi buat masa ini, ia adalah rentetan berkod keras ('shruti').

useEffect: Cangkuk useEffect berjalan apabila disahkan atau menavigasi perubahan.
Di dalam useEffect, kod menyemak sama ada pengguna disahkan. Jika tidak (! disahkan), pengguna dialihkan ke laluan akar menggunakan fungsi navigasi.
Pilihan { replace: true } menghalang penambahan ubah hala pada sejarah penyemak imbas, bermakna pengguna tidak akan dapat menavigasi kembali ke halaman yang dilindungi.

Sekarang Mari kita selami Kod Komponen BaseLayout

import React from "react";

// import components
import AllRoutes from "./routes";

// component
const App = () => {
  return (
    <>

      <AllRoutes />
    </>
  );
};
export default App;

Komponen BaseLayout berfungsi sebagai struktur susun atur biasa untuk semua halaman dalam aplikasi kami.
Ia mengandungi elemen biasa seperti bar sisi dan kawasan kandungan utama.
Komponen kanak-kanak daripada laluan berbeza dipaparkan menggunakan komponen Outlet dalam kawasan kandungan utama.

Cuba artikel ini untuk melaksanakan penghalaan pemuatan malas dengan saluran keluar penghala

Kesimpulan

Penghalaan pemuatan malas dengan Outlet dalam React ialah cara yang berkesan untuk mengoptimumkan prestasi dengan mengurangkan masa pemuatan awal apl anda. Dengan menggunakan React.lazy() dan Suspense, anda memastikan bahawa komponen dimuatkan hanya apabila diperlukan, manakala komponen Outlet membenarkan penghalaan bersarang yang cekap. Digabungkan dengan penggunaan laluan yang dilindungi, pendekatan ini menyediakan struktur modular, berskala dan mesra prestasi untuk mengurus laluan dalam aplikasi anda.

Itu sahaja!

Cubalah, dan beritahu saya pendapat anda dalam ulasan!

Atas ialah kandungan terperinci Memahami tentang React Outlet dengan penghalaan yang betul. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!