Cara menggunakan React Router DOM

pengenalan

Selamat datang ke tutorial kami yang mendalam tentang React Router DOM! Jika anda seorang pembangun UI yang ingin meningkatkan aplikasi React anda dengan keupayaan penghalaan dinamik, anda telah datang ke tempat yang betul. React Router DOM ialah perpustakaan berkuasa yang membolehkan anda membuat aplikasi satu halaman dengan berbilang paparan, semuanya sambil mengekalkan pengalaman pengguna yang lancar dan lancar.

Dalam panduan komprehensif ini, kami akan membimbing anda melalui semua yang anda perlu ketahui tentang React Router DOM, daripada konsep asas kepada teknik lanjutan. Sama ada anda baru menggunakan React atau pembangun berpengalaman yang ingin meningkatkan kemahiran anda, tutorial ini akan memberikan anda pengetahuan dan contoh praktikal yang anda perlukan untuk melaksanakan penghalaan dalam aplikasi React anda dengan berkesan.

Jadi, mari kita selami dan terokai dunia React Router DOM bersama-sama!

Bermula dengan React Router DOM

Apakah React Router DOM?

React Router DOM ialah perpustakaan penghalaan yang popular untuk aplikasi React. Ia membolehkan anda membuat penghalaan bahagian pelanggan yang dinamik dalam aplikasi satu halaman (SPA) anda. Dengan React Router DOM, anda boleh mengurus paparan dan komponen berbeza dengan mudah berdasarkan URL semasa, memberikan pengalaman navigasi yang lancar untuk pengguna anda.

Memasang React Router DOM

Sebelum kami mula melaksanakan penghalaan dalam aplikasi React kami, kami perlu memasang pakej DOM Penghala React. Buka terminal anda dan navigasi ke direktori projek anda, kemudian jalankan arahan berikut:

npm install react-router-dom

Ini akan memasang versi terkini React Router DOM dalam projek anda.

Persediaan Asas

Untuk mula menggunakan React Router DOM dalam aplikasi anda, anda perlu mengimport komponen yang diperlukan dan membalut komponen aplikasi utama anda dengan komponen BrowserRouter. Berikut ialah contoh asas cara menyediakan React Router DOM dalam fail index.js anda:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

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

Sekarang kita mempunyai persediaan asas, mari kita terokai komponen teras React Router DOM dan cara menggunakannya dengan berkesan.

Komponen Teras DOM Penghala Reaksi

Laluan dan Laluan

Komponen Laluan dan Laluan ialah blok binaan React Router DOM. Ia membenarkan anda untuk menentukan laluan dan komponen berbeza yang harus diberikan untuk setiap laluan dalam aplikasi anda.

Berikut ialah contoh cara menggunakan komponen ini:

import React from 'react';
import { Routes, Route } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/contact" element={<Contact />} />
    </Routes>
  );
}

export default App;

Dalam contoh ini, kami telah menentukan tiga laluan: halaman utama ("/"), halaman tentang ("/about") dan halaman kenalan ("/contact"). Setiap laluan dikaitkan dengan komponen tertentu yang akan dipaparkan apabila URL yang sepadan diakses.

Komponen Pautan

Komponen Pautan digunakan untuk membuat pautan navigasi dalam aplikasi anda. Ia merupakan bahagian penting dalam React Router DOM kerana ia membolehkan pengguna beralih antara paparan berbeza tanpa mencetuskan muat semula halaman penuh.

Begini cara anda boleh menggunakan komponen Pautan:

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

function Navigation() {
  return (
    <nav>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/contact">Contact</Link></li>
      </ul>
    </nav>
  );
}

export default Navigation;

Komponen NavLink

Komponen NavLink adalah serupa dengan Pautan, tetapi ia menyediakan fungsi tambahan untuk menggayakan pautan aktif. Ini amat berguna untuk mencipta menu navigasi di mana anda ingin menyerlahkan halaman aktif semasa.

Berikut ialah contoh cara menggunakan NavLink:

import React from 'react';
import { NavLink } from 'react-router-dom';

function Navigation() {
  return (
    <nav>
      <ul>
        <li>
          <NavLink to="/" style={({ isActive }) => isActive ? { color: 'red' } : undefined}>
            Home
          </NavLink>
        </li>
        <li>
          <NavLink to="/about" style={({ isActive }) => isActive ? { color: 'red' } : undefined}>
            About
          </NavLink>
        </li>
        <li>
          <NavLink to="/contact" style={({ isActive }) => isActive ? { color: 'red' } : undefined}>
            Contact
          </NavLink>
        </li>
      </ul>
    </nav>
  );
}

export default Navigation;

Dalam contoh ini, kami menggunakan prop isActive untuk menggunakan warna merah pada pautan aktif.

Teknik Penghalaan Lanjutan

Sekarang kita telah mempelajari asasnya, mari kita terokai beberapa teknik penghalaan yang lebih maju yang boleh anda laksanakan menggunakan React Router DOM.

Laluan Bersarang

Laluan bersarang membolehkan anda membuat struktur penghalaan yang lebih kompleks dalam aplikasi anda. Ini amat berguna untuk membuat reka letak dengan komponen yang dikongsi atau untuk mengatur laluan berkaitan.

Berikut ialah contoh cara melaksanakan laluan bersarang:

import React from 'react';
import { Routes, Route, Outlet } from 'react-router-dom';
import Header from './components/Header';
import Footer from './components/Footer';
import Home from './components/Home';
import About from './components/About';
import Services from './components/Services';
import ServiceDetails from './components/ServiceDetails';

function Layout() {
  return (
    <div>
      <Header />
      <Outlet />
      <Footer />
    </div>
  );
}

function App() {
  return (
    <Routes>
      <Route path="/" element={<Layout />}>
        <Route index element={<Home />} />
        <Route path="about" element={<About />} />
        <Route path="services" element={<Services />} />
        <Route path="services/:id" element={<ServiceDetails />} />
      </Route>
    </Routes>
  );
}

export default App;

Dalam contoh ini, kami telah mencipta komponen Reka Letak yang merangkumi pengepala dan pengaki. Komponen Outlet digunakan untuk memaparkan laluan kanak-kanak dalam reka letak.

Laluan Dinamik dan Parameter URL

Laluan dinamik membolehkan anda mencipta laluan fleksibel yang boleh mengendalikan segmen berubah-ubah. Ini berguna untuk senario di mana anda perlu memaparkan maklumat terperinci tentang item tertentu, seperti halaman produk atau profil pengguna.

Berikut ialah contoh cara menggunakan laluan dinamik dan mengakses parameter URL:

import React from 'react';
import { useParams } from 'react-router-dom';

function ProductDetails() {
  const { productId } = useParams();

  return (
    <div>
      <h1>Product Details</h1>
      <p>You are viewing product with ID: {productId}</p>
    </div>
  );
}

export default ProductDetails;

Untuk menggunakan komponen ini, anda akan mentakrifkan laluan seperti ini:

<Route path="/products/:productId" element={<ProductDetails />} />

Navigasi Programmatik

Kadangkala anda perlu menavigasi secara pengaturcaraan berdasarkan keadaan atau tindakan pengguna tertentu. React Router DOM menyediakan cangkuk useNavigate untuk tujuan ini.

Here's an example of how to use useNavigate:

import React from 'react';
import { useNavigate } from 'react-router-dom';

function LoginForm() {
  const navigate = useNavigate();

  const handleSubmit = (event) => {
    event.preventDefault();
    // Perform login logic here
    // If login is successful, navigate to the dashboard
    navigate('/dashboard');
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* Form fields */}
      <button type="submit">Login</button>
    </form>
  );
}

export default LoginForm;

Handling Route Parameters and Query Strings

React Router DOM provides powerful tools for working with route parameters and query strings, allowing you to create dynamic and flexible routing solutions.

Route Parameters

We've already seen how to use route parameters with the useParams hook. Let's explore this further with a more complex example:

import React from 'react';
import { useParams } from 'react-router-dom';

function BlogPost() {
  const { category, postId } = useParams();

  return (
    <div>
      <h1>Blog Post</h1>
      <p>Category: {category}</p>
      <p>Post ID: {postId}</p>
    </div>
  );
}

export default BlogPost;

To use this component, you would define a route like this:

<Route path="/blog/:category/:postId" element={<BlogPost />} />

This allows you to create URLs like /blog/technology/123 or /blog/travel/456, with the category and post ID being dynamically extracted from the URL.

Query Strings

Query strings are useful for passing optional parameters to your routes. React Router DOM provides the useSearchParams hook to work with query strings.

Here's an example of how to use useSearchParams:

import React from 'react';
import { useSearchParams } from 'react-router-dom';

function ProductList() {
  const [searchParams, setSearchParams] = useSearchParams();
  const category = searchParams.get('category');
  const sortBy = searchParams.get('sortBy');

  return (
    <div>
      <h1>Product List</h1>
      <p>Category: {category || 'All'}</p>
      <p>Sort By: {sortBy || 'Default'}</p>
      <button onClick={() => setSearchParams({ category: 'electronics', sortBy: 'price' })}>
        Filter Electronics, Sort by Price
      </button>
    </div>
  );
}

export default ProductList;

In this example, we're reading the category and sortBy parameters from the query string. We're also demonstrating how to update the query string using the setSearchParams function.

Protecting Routes and Handling Authentication

One common requirement in many applications is to protect certain routes based on user authentication status. React Router DOM can be used in conjunction with your authentication logic to create protected routes.

Here's an example of how you might implement protected routes:

import React from 'react';
import { Route, Navigate } from 'react-router-dom';

function ProtectedRoute({ element, isAuthenticated, ...rest }) {
  return (
    <Route
      {...rest}
      element={isAuthenticated ? element : <Navigate to="/login" replace />}
    />
  );
}

function App() {
  const [isAuthenticated, setIsAuthenticated] = React.useState(false);

  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/login" element={<Login setIsAuthenticated={setIsAuthenticated} />} />
      <ProtectedRoute
        path="/dashboard"
        element={<Dashboard />}
        isAuthenticated={isAuthenticated}
      />
    </Routes>
  );
}

export default App;

In this example, we've created a ProtectedRoute component that checks if the user is authenticated. If they are, it renders the specified element; if not, it redirects them to the login page.

Handling 404 Pages and Redirects

React Router DOM makes it easy to handle 404 (Not Found) pages and implement redirects when necessary.

404 Pages

To create a 404 page, you can use the * path at the end of your route definitions:

import React from 'react';
import { Routes, Route } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import NotFound from './components/NotFound';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
}

export default App;

In this example, the NotFound component will be rendered for any route that doesn't match the defined paths.

Redirects

Sometimes you may need to redirect users from one route to another. React Router DOM provides the Navigate component for this purpose:

import React from 'react';
import { Routes, Route, Navigate } from 'react-router-dom';
import Home from './components/Home';
import OldPage from './components/OldPage';
import NewPage from './components/NewPage';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/old-page" element={<Navigate to="/new-page" replace />} />
      <Route path="/new-page" element={<NewPage />} />
    </Routes>
  );
}

export default App;

In this example, any user trying to access /old-page will be automatically redirected to /new-page.

Optimizing Performance with Code Splitting

As your application grows, you may want to implement code splitting to improve performance. React Router DOM works well with React's lazy loading feature, allowing you to load route components only when they're needed.

Here's an example of how to implement code splitting with React Router DOM:

import React, { Suspense, lazy } from 'react';
import { Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./components/Home'));
const About = lazy(() => import('./components/About'));
const Contact = lazy(() => import('./components/Contact'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </Suspense>
  );
}

export default App;

In this example, we're using React's `lazy` function to dynamically import our components. The `Suspense` component is used to show a loading indicator while the component is being loaded.

Conclusion

Congratulations! You've now completed a comprehensive tutorial on React Router DOM. We've covered everything from basic setup to advanced techniques like nested routes, dynamic routing, authentication, and code splitting. With this knowledge, you're well-equipped to implement robust routing solutions in your React applications.

Remember, the key to mastering React Router DOM is practice. Try implementing these concepts in your own projects, and don't be afraid to experiment with different routing structures and techniques. As you become more comfortable with React Router DOM, you'll find that it opens up new possibilities for creating dynamic and user-friendly web applications.

Atas ialah kandungan terperinci Cara menggunakan React Router DOM. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!