中レベル: 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 コンポーネントがレンダリングされます。

リンクコンポーネント

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 コンポーネント

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 を使用して User コンポーネントがレンダリングされます。

ルートパラメータ

ルート パラメーターを使用すると、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 コンポーネントは、ダッシュボード コンポーネントをレンダリングする前にユーザーが認証されているかどうかを確認します。ユーザーが認証されていない場合は、ログイン コンポーネントにリダイレクトされます。

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 中国語 Web サイトの他の関連記事を参照してください。