首頁 >web前端 >js教程 >進階:使用 React Router 進行路由

進階:使用 React Router 進行路由

王林
王林原創
2024-07-18 20:01:12332瀏覽

Senior level: Routing with 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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn