實習生等級：使用 React Router 進行路由

路由是建立現代 Web 應用程式的關鍵方面。 React Router 是一個功能強大的程式庫，可讓您在 React 應用程式中處理路由。本指南將向您介紹 React Router，涵蓋基本設定和使用，以及進階路由技術和路由防護。

React 路由器簡介

React Router 支援 React 應用程式中不同元件之間的導航，讓您可以建立具有多個視圖的單頁應用程式。

設定 React 路由器

要開始使用 React Router，您需要將其安裝到您的專案中。您可以使用 npm 或yarn 來完成此操作。

npm install react-router-dom

或

yarn add react-router-dom

路由、交換器、連結和 NavLink 元件

React Router 提供了幾個元件來定義路由和處理導航。

路線組件

路線組件用於在應用程式中定義路線。它指定路徑以及路徑匹配時應渲染的元件。

範例：

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';

const App = () => {
  return (
    <Router>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
};

export default App;

本範例中，當路徑為 / 時會渲染 Home 元件，當路徑為 /about 時會渲染 About 元件。

開關元件

Switch 元件確保一次僅渲染一條路線。它渲染與當前 URL 匹配的第一個 Route。

範例：

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';
import NotFound from './NotFound';

const App = () => {
  return (
    <Router>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route component={NotFound} />
      </Switch>
    </Router>
  );
};

export default App;

在此範例中，如果沒有符合的路由，將渲染 NotFound 元件。

連結組件

Link 元件用於在應用程式中建立導航連結。它的工作原理與錨點 () 標籤類似，但可以避免整頁重新載入。

範例：

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';

const App = () => {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
};

export default App;

在此範例中，按一下連結將導覽至對應的路線，而無需重新載入頁面。

導航連結組件

NavLink 元件與 Link 元件類似，但提供基於活動路線的附加樣式功能。

範例：

import React from 'react';
import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom';
import Home from './Home';
import About from './About';

const App = () => {
  return (
    <Router>
      <nav>
        <NavLink exact to="/" activeClassName="active">
          Home
        </NavLink>
        <NavLink to="/about" activeClassName="active">
          About
        </NavLink>
      </nav>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
};

export default App;

在此範例中，activeClassName 屬性用於將活動類別套用至與目前路由相符的連結。

先進的路由技術

嵌套路由

巢狀路由可讓您在其他路由中建立路由。這對於建立具有子導航的佈局很有用。

範例：

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link, useRouteMatch } from 'react-router-dom';

const Topic = ({ match }) => <h3>Requested Topic ID: {match.params.topicId}</h3>;

const Topics = () => {
  let { path, url } = useRouteMatch();
  return (
    <div>
      <h2>Topics</h2>
      <ul>
        <li>
          <Link to={`${url}/components`}>Components</Link>
        </li>
        <li>
          <Link to={`${url}/props-v-state`}>Props v. State</Link>
        </li>
      </ul>
      <Switch>
        <Route exact path={path}>
          <h3>Please select a topic.</h3>
        </Route>
        <Route path={`${path}/:topicId`} component={Topic} />
      </Switch>
    </div>
  );
};

const App = () => (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/topics">Topics</Link>
        </li>
      </ul>
      <Switch>
        <Route exact path="/">
          <h2>Home</h2>
        </Route>
        <Route path="/topics" component={Topics} />
      </Switch>
    </div>
  </Router>
);

export default App;

在此範例中，主題元件包含巢狀路由，允許在主題部分內使用子導航系統。

動態路由

動態路由可讓您基於動態參數（例如使用者 ID 或產品 ID）建立路由。

範例：

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

const User = ({ match }) => <h3>User ID: {match.params.userId}</h3>;

const App = () => (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/user/1">User 1</Link>
        </li>
        <li>
          <Link to="/user/2">User 2</Link>
        </li>
      </ul>
      <Switch>
        <Route path="/user/:userId" component={User} />
      </Switch>
    </div>
  </Router>
);

export default App;

在此範例中，使用者元件使用作為路由參數傳遞的使用者 ID 進行渲染。

路由參數

路由參數可讓您從 URL 擷取值並在元件中使用它們。

範例：

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

const Product = ({ match }) => <h3>Product ID: {match.params.productId}</h3>;

const App = () => (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/product/101">Product 101</Link>
        </li>
        <li>
          <Link to="/product/202">Product 202</Link>
        </li>
      </ul>
      <Switch>
        <Route path="/product/:productId" component={Product} />
      </Switch>
    </div>
  </Router>
);

export default App;

在此範例中，Product 元件使用productId 路由參數來顯示產品 ID。

路由守衛和重定向

路由防護和重新導向可協助您根據條件（例如使用者驗證）控制對某些路由的存取。

保護路線

為了保護路由，您可以建立一個高階元件 (HOC)，在渲染元件之前檢查條件（例如，使用者驗證）。

範例：

import React from 'react';
import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';

const isAuthenticated = false;

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={(props) =>
      isAuthenticated ? <Component {...props} /> : <Redirect to="/login" />
    }
  />
);

const Dashboard = () => <h3>Dashboard</h3>;
const Login = () => <h3>Login</h3>;

const App = () => (
  <Router>
    <div>
      <PrivateRoute path="/dashboard" component={Dashboard} />
      <Route path="/login" component={Login} />
    </div>
  </Router>
);

export default App;

在此範例中，PrivateRoute 元件在渲染 Dashboard 元件之前檢查使用者是否已通過驗證。如果用戶未通過身份驗證，他們將被重定向到登入元件。

在 React Router 中實現重定向

可以使用重定向元件來實現重定向，以程式設計方式將使用者導航到不同的路線。

範例：

import React from 'react';
import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-dom';

const OldPage = () => <h3>Old Page (will redirect)</h3>;
const NewPage = () => <h3>New Page</h3>;

const App = () => (
  <Router>
    <Switch>
      <Route path="/old-page">
        <Redirect to="/new

-page" />
      </Route>
      <Route path="/new-page" component={NewPage} />
    </Switch>
  </Router>
);

export default App;

在此範例中，存取 /old-page 將自動將使用者重新導向至 /new-page。

結論

理解並使用 React Router 實作路由對於建立健壯的 React 應用程式至關重要。透過掌握設定路由、使用 Link 和 NavLink 處理導航的基礎知識，以及實現嵌套路由、動態路由、路由參數和路由防護等進階技術，您可以在應用程式中建立無縫且安全的導航體驗。隨著您不斷發展自己的技能，這些概念將成為您使用 React 建立複雜的單頁應用程式的能力的基礎。

以上是實習生等級：使用 React Router 進行路由的詳細內容。更多資訊請關注PHP中文網其他相關文章！