ReactRouterv4を使用して条件付きで応答性の高いルーティングを設定する方法

投稿日: 2022-04-20 2022-08-02
タグ: javascript, React

序章

Reactのレスポンシブルーティングには、デバイスのビューポートに基づいてユーザーにさまざまなルートを提供することが含まれます。これを実現するために通常CSSメディアクエリが使用されますが、これにより、CSSプロップを使用してさまざまな要素を表示するかどうかを制限できます。レスポンシブルートを使用すると、画面サイズに直接基づいて、Reactアプリケーションの個別のビュー全体をさまざまなユーザーに提供できるようになりました。

このチュートリアルでは、Reactアプリケーションにルーティングとレスポンシブルートの提供を実装する方法を示します。このチュートリアルに従うことで、デバイス画面のサイズに基づいてユーザーにさまざまなルートを提供するユーザーダッシュボードアプリケーションを構築します。

前提条件

このチュートリアルを完了するには、次のものが必要です。

Node.jsはローカルにインストールされます。これは、Node.jsのインストール方法とローカル開発環境の作成に従って実行できます。

このチュートリアルは、Nodev14.2.0で検証されました。 npm v6.14.5、 react v16.3.2、 react-router-dom v5.2.0、および react-media v1.10.0。

ステップ1—プロジェクトの設定

プロジェクトを開始するには、 npx およびcreate-react-appを使用して、新しいReactアプリケーションを作成します。

npx create-react-app responsive-routing

次に、新しいプロジェクトディレクトリに移動します。

cd responsive-routing

次に、このデモを正常にビルドするために必要なモジュールをインストールします。これらのモジュールは react-router-dom と react-media. 次のコマンドを実行して、これらをインストールできます。

npm install react-router-dom@5.2.0 react-media@1.10.0

これで、次のコマンドを実行してアプリケーションを起動できます。

npm start

注：ルーティングには必要ありませんが、このチュートリアルでは、スタイリングとレイアウトに BullmaCSSフレームワークを使用します。

次のターミナルコマンドでブルマを追加できます。

npm install bulma@0.6.2

そして、あなたに以下を追加することによって index.js:

index.js

import 'bulma/css/bulma.css';

このステップでは、プロジェクトをセットアップし、スタイリングとレイアウトのためのBulmaフレームワークを追加しました。

ステップ2—Reactルーターを追加する

プロジェクトにルーティングを追加するには、 index.js 要素階層のルートにルーターをレンダリングするファイル：

nano index.js

まず、インポート BrowserRouter から react-router-dom エイリアスを Router:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from "react-router-dom";
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

次に、交換します <React> と <Router>:

index.js

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById('root')
);

これで、アプリケーションはReactRouterを使用するように設定されました。

ステップ3—作成 `Nav` 成分

ページの中央にあるGitHubロゴは、アプリケーションのナビゲーション部分として機能します。

あなたの中で src ディレクトリ、という名前の新しいディレクトリを作成します Nav:

mkdir src/Nav

GitHubロゴを追加し、名前を付けて保存する必要があります logo.svg このディレクトリにあります。

次に、を作成します index.js このディレクトリのファイル：

nano src/Nav/index.js

そして、次のコードを追加します。

src / Nav / index.js

import React from 'react';
import './Nav.css';
import logo from './logo.svg';

const Nav = () => (
  <nav>
    <img src={logo} alt="Logo" />
  </nav>
);

export default Nav;

次に、 Nav.css このディレクトリのファイル：

nano src/Nav/Nav.css

ナビゲーションコンポーネントのスタイルは次のとおりです。

src / Nav / Nav.css

nav {
  display: flex;
  justify-content: center;
  height: 50px;
  margin-bottom: 10px;
}

nav > img {
  display: block;
  width: 50px;
  height: auto;
}

それでは、レンダリングしてみましょう Nav コンポーネントを変更して App.js ファイル。

nano src/App.js

をインポートします Nav コンポーネントとあなたの中でそれを使用してください App 成分：

src / App.js

import React, { Component } from 'react';
import Nav from './Nav';

class App extends Component {
  render() {
    return (
      <div>
        <Nav />
      </div>
    );
  }
}

export default App;

これで、Webブラウザーでアプリを開くと、追加したロゴが表示されます。

ステップ4—作成 `UsersCard` 成分

ユーザーカードは、ユーザーの詳細を表示する責任があります。のような情報が含まれます avatar, name、と username. また、表示されます followers, following、と repos.

の中に src アプリのディレクトリ、新しいを作成します Users ディレクトリ：

mkdir src/Users

次に、 UsersCard.js このディレクトリのファイル：

nano src/Users/UsersCard.js

そして、次のコードを追加します。

src / Users / UsersCard.js

import React from 'react';
import { Link } from 'react-router-dom';
import './UsersCard.css'

const UsersCard = ({ user, match }) => <Link to={`${match.url}/${user.id}`} className="column card">
  <img src={user.avatar} alt=""/>
  <p className="users-card__name">{user.name}</p>
  <p className="users-card__username">@{user.username}</p>
  <div className="users-card__divider"></div>
  <div className="users-card__stats">
    <div>
      <p>{user.followers}</p>
      <span>Followers</span>
    </div>
    <div>
      <p>{user.following}</p>
      <span>Following</span>
    </div>
    <div>
      <p>{user.repos}</p>
      <span>Repositories</span>
    </div>
  </div>
</Link>;

export default UsersCard;

The Link からのコンポーネント react-router-dom カードがクリックされたときに、ユーザーが1人のユーザーの詳細を表示するためにナビゲートできるようにするために使用されます。

たとえば、 UsersCard 持っています id の 10009、 Link コンポーネントは次のようなURLを生成します：

localhost:3000/10009

localhost:3000 現在のURLを表します。
10009 を表します $user.id.

このすべての情報は、コンポーネントがレンダリングされるときに渡されます。

次に、 UsersCard.css このディレクトリのファイル：

nano src/users/UsersCard.css

The UsersCard コンポーネントのスタイルは次のとおりです。

src / Users / UsersCard.css

.card {
  border-radius: 2px;
  background-color: #ffffff;
  box-shadow: 0 1.5px 3px 0 rgba(0, 0, 0, 0.05);
  max-width: 228px;
  margin: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
}

.card img {
  width: 50px;
  height: auto;
  border-radius: 50%;
  display: block;
  padding: 15px 0;
}

.users-card__name {
  font-weight: 400;
  font-size: 16.5px;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: left;
  color: #25292e;
}

.users-card__username {
  font-size: 14px;
  color: #707070;
}

.users-card__divider {
  border: solid 0.5px #efefef;
  width: 100%;
  margin: 15px 0;
}

.users-card__stats {
  display: flex;
}

.users-card__stats p {
  font-size: 20px;
}

.users-card__stats div {
  margin: 10px;
  text-align: center;
}

.users-card__stats span {
  color: #707070;
  font-size: 12px;
}

この時点で、 UsersCard 成分。次に、これらのカードをリストに表示する必要があります。

ステップ5—作成 `UsersList` 成分

アプリケーションでユーザーを一覧表示するには、最初にを作成する必要があります UsersList 成分。

作成する UsersCard.js のファイル src/Users ディレクトリ：

nano UsersList.js

編集しましょう UsersList.js 次のように。

まず、必要なインポートを行います。

src / Users / UsersList.js

import React from 'react';
import UsersCard from './UsersCard';
import './UsersList.css';

定義する listOfUsersPerRow 構築する関数 UsersCard の配列におけるそれらの位置と一致する users:

// ...

const listOfUsersPerRow = (users, row, itemsPerRow, match) =>
  users
    .slice((row - 1) * itemsPerRow, row * itemsPerRow)
    .map(user => <UsersCard user={user} key={user.id} match={match} />);

定義する listOfRows 構築する機能 "columns" 含む UsersCardsの量によって定義されます itemsPerRow:

// ...

const listOfRows = (users, itemsPerRow, match) => {
  const numberOfUsers = users.length;
  const rows = Math.ceil(numberOfUsers / itemsPerRow);

  return Array(rows)
    .fill()
    .map((val, rowIndex) => (
    <div className="columns">
        {listOfUsersPerRow(users, rowIndex + 1, itemsPerRow, match)}
    </div>
  ));
};

The listOfUsersPerRow と listOfRows 関数は、各行に指定された数以下のカードがあることを確認します。

次に、関数を使用して作成します UsersList:

src / Users / UsersList.js

//...

const UsersList = ({ users, itemsPerRow = 2, match }) => (
  <div className="cards">
    <h3 className="is-size-3 has-text-centered">Users</h3>
    {listOfRows(users, itemsPerRow, match)}
  </div>
);

export default UsersList;

次に、 UsersList.css このディレクトリのファイル：

nano src/Users/UsersList.css

The UsersList コンポーネントのスタイルは次のとおりです。

src / Users / UsersList.css

.cards {
  margin-left: 20px;
}

.columns {
  margin-top: 0;
}

この時点で、 UsersList で構成されるコンポーネント UsersCards。次に、個々のユーザーの詳細ビューが必要になります。

ステップ6—作成 `UsersDetails` 成分

シングルの場合 UsersCard からクリックされます UsersList、シングル UsersCard 詳細セクションの下に表示されます。

作成する UsersDetails.js のファイル src/Users ディレクトリ：

nano UsersDetails.js

そして、次のコードを追加します。

src / Users / UsersDetails.js

import React from 'react';
import UsersCard from './UsersCard';

const UsersDetails = ({ user, match }) => <div>
  <h3 className="is-size-3 has-text-centered">Details</h3>
    <UsersCard user={user} match={match} />
  </div>;

export default UsersDetails;

この時点で、 UsersDetails 成分。次に、表示します UsersLists と UsersDetails.

ステップ7—作成 `UsersDashboard` 成分

ダッシュボードコンポーネントを作成するには、 UsersList そして、 UsersCard クリックすると、を表示します UsersDetails ページをリロードせずに画面の横に表示されます。

作成する UsersDashboard.js のファイル src/Users ディレクトリ：

nano src/Users/UsersDashboard.js

そして、次のコードを追加します。

src / Users / UsersDashboard.js

import React from 'react';
import { Route } from 'react-router-dom';
import UsersList from './UsersList';
import UsersDetails from './UsersDetails';

const UsersDashboard = ({ users, user, match }) => (
  <div className="columns">
    <div className="column">
      <UsersList users={users} match={match} />
    </div>
    <div className="column">
      <Route
        path={match.url + '/:id'}
        render={props => (
          <UsersDetails
            user={
              users.filter(
                user => user.id === parseInt(props.match.params.id, 10)
              )[0]
            }
            match={match}
          />
        )}
      />
    </div>
  </div>
);

export default UsersDashboard;

このスニペットでは、 Route によって提供されるコンポーネント react-router-dom カードがクリックされたときに特定のユーザーの詳細を表示するコンポーネントとして。

この時点で、アプリケーションのすべてのコンポーネントが揃っています。

ステップ8—すべてをまとめる

それでは、これをすべてまとめましょう。

再訪 App.js ファイル：

nano src/App.js

追加 Redirect と UsersDashboard:

src / App.js

import React, { Component } from 'react';
import { Route, Redirect } from 'react-router-dom';
import Nav from './Nav';
import UsersDashboard from './Users/UsersDashboard';
import './App.css';

追加 state の配列を含む users:

src / App.js

//...

class App extends Component {
  state = {
    users: [
      {
        id: 39191,
        avatar: 'https://avatars0.githubusercontent.com/u/39191?v=4',
        name: 'Paul Irish',
        username: 'paulirish',
        followers: '12k',
        following: '1k',
        repos: '1.5k'
      },
      // ... other user data
    ]
  };

  // ...
}

// ...

追加 Route と UsersDashboard あなたに App 成分：

class App extends Component {
  // ...

  render() {
    return (
      <div className="App">
        <Nav />
        <Route
          path="/dashboard"
          render={props => (
            <UsersDashboard users={this.state.users} {...props} />
          )}
        />
        <Redirect from="/" to="/dashboard"/>
        <Redirect from="/users" to="/dashboard"/>
      </div>
    );
  }
}

// ...

これで、アプリケーションをWebブラウザーで表示すると、次のように表示されます。 UsersList. クリックすると UsersCard、あなたはそれがに表示されるのを見るでしょう UsersDetails.

ステップ9—レスポンシブルーティングの設定

ユーザーがこのアプリケーションにアクセスすると、画面サイズに関係なく、これと同じビューと機能が得られます。本格的なアプリケーションでは、ユーザーが適切に楽しめるエクスペリエンスを提供することをお勧めします。そのための1つの方法は、デバイスの正確なサイズに一致するビューを提供することです。これをアプリケーションに実装します。

ワイドスクリーンでアプリケーションにアクセスすると、ユーザーはにリダイレクトされます。 /dashboard アプリケーションのルート、および小さな画面で表示する場合、ユーザーはに誘導されます /users アプリケーションのルート。

を更新します src/App.js このように見えるファイル：

src / App.js

import React, { Component } from 'react';
import { Route, Switch, Redirect } from 'react-router-dom'; // add Switch
import Media from 'react-media'; // add Media
import Nav from './Nav';
import UsersList from './Users/UsersList'; // add UsersList
import UsersDetails from './Users/UsersDetails'; // add UsersDetails
import UsersDashboard from './Users/UsersDashboard';
import './App.css';

class App extends Component {
  // ...

  render() {
    return (
      <div className="App">
        <Nav />
        <Media query="(max-width: 599px)">
          {matches =>
            matches ? (
              <Switch>
                <Route
                  exact
                  path="/users"
                  render={props => (
                    <UsersList users={this.state.users} {...props} />
                  )}
                />
                <Route
                  path="/users/:id"
                  render={props => (
                    <UsersDetails
                      user={
                        this.state.users.filter(
                          user =>
                            user.id === parseInt(props.match.params.id, 10)
                        )[0]
                      }
                      {...props}
                    />
                  )}
                />
                <Redirect from="/" to="/users"/>
                <Redirect from="/dashboard" to="/users"/>
              </Switch>
            ) : (
              <Switch>
                <Route
                  path="/dashboard"
                  render={props => (
                    <UsersDashboard users={this.state.users} {...props} />
                  )}
                />
                <Redirect from="/" to="/dashboard"/>
                <Redirect from="/users" to="/dashboard"/>
              </Switch>
            )
          }
        </Media>
      </div>
    );
  }
}

export default App;

このスニペットでは、 Media 画面のサイズをチェックするコンポーネント。画面幅が小さい場合 599px、さまざまなルートに表示したいものを設定し、リダイレクトします / と /dashboard へのルート /users ルート。

画面サイズがより大きい場合 599px、前の手順で確立した完全なユーザーダッシュボードを表示します。

アプリケーションを実行します。

npm start

アプリケーションと対話し、画面サイズを調整して、アプリケーションと対話するときにルートがどのように異なる方法で処理されるかを確認します。

画面サイズに基づいてさまざまなルートを提供すると、メディアクエリを超えた何かが提供されます。これは、デバイスサイズに基づいて特別に設計されたコンポーネントをユーザーに提供できるようになったためです。

結論

この記事では、Reactを使用したコンポーネントベースのルーティングと、Reactアプリケーションに条件付きレンダリングを実装する方法を紹介しました。

このチュートリアルの完全なコードサンプルについては、GitHubのresponse-routingリポジトリを確認してください。

Reactの詳細については、 React.js シリーズのコーディング方法をご覧になるか、Reactトピックページで演習やプログラミングプロジェクトを確認してください。

getdocs

13036

序章

前提条件

ステップ1—プロジェクトの設定

ステップ2—Reactルーターを追加する

ステップ3—作成 Nav 成分

ステップ4—作成 UsersCard 成分

ステップ5—作成 UsersList 成分

ステップ6—作成 UsersDetails 成分

ステップ7—作成 UsersDashboard 成分

ステップ8—すべてをまとめる

ステップ9—レスポンシブルーティングの設定

結論

getdocs

ステップ3—作成 `Nav` 成分

ステップ4—作成 `UsersCard` 成分

ステップ5—作成 `UsersList` 成分

ステップ6—作成 `UsersDetails` 成分

ステップ7—作成 `UsersDashboard` 成分