如何使用 React Router DOM

介紹

歡迎來到我們關於 React Router DOM 的深入教學！如果您是 UI 開發人員，希望透過動態路由功能增強 React 應用程序，那麼您來對地方了。 React Router DOM 是一個功能強大的函式庫，可讓您建立具有多個視圖的單頁應用程序，同時保持流暢、無縫的使用者體驗。

在這份綜合指南中，我們將引導您了解有關 React Router DOM 所需了解的所有內容，從基本概念到高級技術。無論您是 React 新手還是希望提高技能的經驗豐富的開發人員，本教程都將為您提供在 React 應用程式中有效實現路由所需的知識和實際範例。

那麼，讓我們一起深入探索 React Router DOM 的世界吧！

React Router DOM 入門

什麼是 React Router DOM？

React Router DOM 是 React 應用程式的熱門路由庫。它允許您在單頁應用程式 (SPA) 中建立動態的客戶端路由。使用 React Router DOM，您可以根據目前 URL 輕鬆管理不同的視圖和元件，為您的使用者提供無縫的導航體驗。

安裝 React Router DOM

在我們開始在 React 應用程式中實作路由之前，我們需要安裝 React Router DOM 套件。開啟終端機並導航到專案目錄，然後執行以下命令：

npm install react-router-dom

這將在您的專案中安裝最新版本的 React Router DOM。

基本設定

要開始在應用程式中使用 React Router DOM，您需要匯入必要的元件並使用 BrowserRouter 元件包裝主應用程式元件。以下是如何在 index.js 檔案中設定 React Router DOM 的基本範例：

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')
);

現在我們已經完成了基本設置，讓我們探索 React Router DOM 的核心元件以及如何有效地使用它們。

React Router DOM 的核心元件

路線與路線

路由和路由元件是 React Router DOM 的建構塊。它們允許您定義應為應用程式中的每個路線呈現的不同路徑和元件。

以下是如何使用這些元件的範例：

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;

在此範例中，我們定義了三個路由：首頁（「/」）、關於頁面（「/about」）和聯絡頁面（「/contact」）。每個路由都與一個特定的元件關聯，當存取對應的 URL 時將呈現該元件。

連結組件

Link 元件用於在應用程式中建立導航連結。它是 React Router DOM 的重要組成部分，因為它允許使用者在不同視圖之間移動，而不會觸發整個頁面重新載入。

以下是使用連結元件的方法：

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;

導航連結組件

NavLink 元件與 Link 類似，但它提供了設定活動連結樣式的附加功能。這對於建立要突出顯示目前活動頁面的導覽選單特別有用。

以下是如何使用 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;

在此範例中，我們使用 isActive 屬性將紅色套用至活動連結。

進階路由技術

現在我們已經介紹了基礎知識，讓我們來探索一些可以使用 React Router DOM 實現的更進階的路由技術。

嵌套路由

巢狀路由可讓您在應用程式中建立更複雜的路由結構。這對於建立具有共用元件的佈局或組織相關路線特別有用。

以下是如何實現巢狀路由的範例：

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;

在此範例中，我們建立了一個包含頁首和頁尾的版面配置元件。 Outlet 元件用於渲染佈局內的子路由。

動態路由和 URL 參數

動態路線可讓您建立可以處理可變段的靈活路徑。這對於需要顯示特定項目的詳細資訊（例如產品頁面或使用者個人資料）的場景非常有用。

以下是如何使用動態路由和存取 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;

要使用此元件，您需要定義以下路由：

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

程式化導航

有時您需要根據某些條件或使用者操作以程式設計方式進行導航。 React Router DOM 為此提供了 useNavigate 鉤子。

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.

以上是如何使用 React Router DOM的詳細內容。更多資訊請關注PHP中文網其他相關文章！