進階：使用 React Router 進行路由

身為高階開發人員，全面了解 React 應用程式中的路由至關重要。 React Router 提供了一個強大的解決方案，用於根據 URL 路徑管理元件的導航和渲染。本指南涵蓋了 React Router 的設定、基本元件以及巢狀路由、動態路由、路由參數和路由保護等進階技術。

React 路由器簡介

React Router 是一個功能強大的函式庫，用於處理 React 應用程式中的客戶端路由。它允許基於 URL 路徑的動態路由、嵌套路由和條件渲染。

設定 React 路由器

首先，使用npm或yarn安裝React Router：

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;

開關元件

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;

連結組件

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;

先進的路由技術

嵌套路由

巢狀路線可讓您在其他路線中建立路線，這對於具有子導航的複雜佈局非常有用。

範例：

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;

動態路由

動態路由允許基於動態參數建立路由，對於使用者設定檔或產品詳細資訊很有用。

範例：

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;

路由參數

路由參數允許從 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;

路由守衛和重新導向

保護路線

路由守衛根據使用者驗證等條件限制對某些路由的存取。

範例：

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;

在 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 應用程式至關重要。了解如何設定路由、使用核心元件以及實現嵌套路由、動態路由、路由參數和路由防護等進階技術將使您能夠創建強大的導航系統。作為高級開發人員，這些技能將幫助您在 React 專案中設計和實現可擴展的路由架構，確保無縫的使用者體驗和可維護的程式碼庫。

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