コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

アーキテクト レベル: React Router を使用したルーティング

WBOY
リリース： 2024-07-19 09:51:20
オリジナル
1149 人が閲覧しました

Architect level: Routing with React Router

アーキテクト レベルの開発者として、React Router をマスターすることは、React アプリケーションでスケーラブルで保守性の高い効率的なナビゲーション システムを設計するために不可欠です。このガイドでは、Route、Switch、Link、NavLink などのコア コンポーネントを利用した React Router のセットアップについて詳しく説明し、ネストされたルート、動的ルーティング、ルート パラメーター、ルート ガード、リダイレクトなどの高度なルーティング テクニックについて説明します。

React ルーターの概要

React Router は、動的ルートとネストされたルートを備えたシングルページ アプリケーション (SPA) の作成を容易にする強力なライブラリであり、最新の Web 開発に不可欠なツールとなっています。

Reactルーターのセットアップ

まず、npm または Yarn を使用して React Router をインストールします。

npm install react-router-dom
ログイン後にコピー

または

yarn add react-router-dom
ログイン後にコピー

ルート、スイッチ、リンク、および NavLink コンポーネント

React Router は、ルートを定義し、ナビゲーションを処理するための重要なコンポーネントをいくつか提供します。

ルートコンポーネント

Route コンポーネントは、URL パスを特定のコンポーネントにマップします。現在の URL に基づいてコンポーネントを条件付きでレンダリングできます。

例:

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

const App = () => (
  <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 = () => (
  <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 = () => (
  <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 コンポーネント

NavLink コンポーネントは、アクティブなルートに基づいて追加のスタイル機能を使用してリンクを拡張します。アクティブな状態のスタイルを使用してナビゲーション メニューを作成する場合に便利です。

例:

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

const App = () => (
  <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;
ログイン後にコピー

動的ルーティング

動的ルーティングは、ユーザー 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;
ログイン後にコピー

ルートパラメータ

ルート パラメーターを使用すると、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 アプリケーションで堅牢でスケーラブルなナビゲーション システムを設計するために不可欠です。ルートの設定方法、Route、Switch、Link、NavLink などのコア コンポーネントの使用方法を理解し、ネストされたルート、動的ルーティング、ルート パラメーター、ルート ガードなどの高度なテクニックを実装することで、洗練されたシングルページ アプリケーションを作成できるようになります。アーキテクト レベルの開発者として、スケーラブルなルーティング アーキテクチャを設計する能力は、アプリケーションの保守性と効率を大幅に向上させ、チームをプロジェクト実装の成功に導きます。

以上がアーキテクト レベル: React Router を使用したルーティングの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース：dev.to
前の記事：Python養成講座でゲームプログラムが書けるようになる 次の記事：JavaScript Webブラウザで値が変更されたかどうかを確認する方法
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
2
1980
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
10
2143
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1805
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1703
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1715
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート