中級：使用 React Router 進行路由

路由是建立現代 Web 應用程式的一個重要面向。 React Router 是一個功能強大的程式庫，可讓開發人員有效地處理 React 應用程式中的用戶端路由。本指南將深入研究設定 React Router 的基礎知識、使用基本元件，並探索進階路由技術，例如嵌套路由、動態路由、路由參數和路由防護。

React 路由器簡介

React Router 可讓您根據 URL 管理不同元件的導航和渲染。它有助於建立具有無縫導航體驗的單頁應用程式 (SPA)。

設定 React 路由器

要開始使用React Router，請使用npm 或yarn 安裝它。

npm install react-router-dom

或

yarn add react-router-dom

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

React Router 提供了幾個用於定義路由和處理導航的核心元件。

路線組件

Route 元件用於定義路徑並將其與元件關聯。

範例：

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 元件確保僅渲染第一個符合的路由。

範例：

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 元件。

連結組件

連結元件在您的應用程式中建立導航鏈接，類似於錨點 () 標籤，但無需重新載入頁面。

範例：

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中文網其他相關文章！