ReactRouterv4を使用して条件付きで応答性の高いルーティングを設定する方法
序章
Reactのレスポンシブルーティングには、デバイスのビューポートに基づいてユーザーにさまざまなルートを提供することが含まれます。 これを実現するために通常CSSメディアクエリが使用されますが、これにより、CSSプロップを使用してさまざまな要素を表示するかどうかを制限できます。 レスポンシブルートを使用すると、画面サイズに直接基づいて、Reactアプリケーションの個別のビュー全体をさまざまなユーザーに提供できるようになりました。
このチュートリアルでは、Reactアプリケーションにルーティングとレスポンシブルートの提供を実装する方法を示します。 このチュートリアルに従うことで、デバイス画面のサイズに基づいてユーザーにさまざまなルートを提供するユーザーダッシュボードアプリケーションを構築します。
前提条件
このチュートリアルを完了するには、次のものが必要です。
- Node.jsはローカルにインストールされます。これは、Node.jsのインストール方法とローカル開発環境の作成に従って実行できます。
このチュートリアルは、ノードv14.2.0、npm v6.14.5、react v16.3.2、react-router-dom v5.2.0、およびreact-mediav1.10.0で検証されました。 。
ステップ1—プロジェクトの設定
プロジェクトを開始するには、npxとcreate-react-app を使用して、新しいReactアプリケーションを作成します。
npx create-react-app responsive-routing
次に、新しいプロジェクトディレクトリに移動します。
cd responsive-routing
次に、このデモを正常にビルドするために必要なモジュールをインストールします。 これらのモジュールは、react-router-domおよびreact-mediaです。 次のコマンドを実行して、これらをインストールできます。
npm install [email protected] [email protected]
これで、次のコマンドを実行してアプリケーションを起動できます。
npm start
注：ルーティングには必要ありませんが、このチュートリアルでは、スタイリングとレイアウトに BullmaCSSフレームワークを使用します。
次のターミナルコマンドでブルマを追加できます。
npm install [email protected]
そして、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を使用するように設定されました。
ページの中央にある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;
}
それでは、App.jsファイルを変更して、Navコンポーネントをレンダリングしてみましょう。
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;
react-router-domのLinkコンポーネントは、カードがクリックされたときにユーザーが1人のユーザーの詳細を表示するためにナビゲートできるようにするために使用されます。
たとえば、UsersCardのidが10009の場合、Linkコンポーネントは次のようなURLを生成します。
localhost:3000/10009
localhost:3000は現在のURLを表します。10009は$user.idを表します。
このすべての情報は、コンポーネントがレンダリングされるときに渡されます。
次に、このディレクトリにUsersCard.cssファイルを作成します。
nano src/users/UsersCard.css
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';
usersの配列内の位置と一致するUsersCardを構築するlistOfUsersPerRow関数を定義します。
// ...
const listOfUsersPerRow = (users, row, itemsPerRow, match) =>
users
.slice((row - 1) * itemsPerRow, row * itemsPerRow)
.map(user => <UsersCard user={user} key={user.id} match={match} />);
itemsPerRowの量で定義されたUsersCardを含む"columns"を構築するlistOfRows関数を定義します。
// ...
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>
));
};
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
UsersListコンポーネントのスタイルは次のとおりです。
src / Users / UsersList.css
.cards {
margin-left: 20px;
}
.columns {
margin-top: 0;
}
この時点で、UsersCardで構成されるUsersListコンポーネントがあります。 次に、個々のユーザーの詳細ビューが必要になります。
ステップ6—UsersDetailsコンポーネントを作成する
UsersListからシングルUsersCardをクリックすると、詳細セクションの下にシングル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;
このスニペットでは、react-router-domが提供するRouteコンポーネントをコンポーネントとして使用して、カードがクリックされたときに特定のユーザーの詳細を表示しました。
この時点で、アプリケーションのすべてのコンポーネントが揃っています。
ステップ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';
usersの配列を含むstateを追加します。
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トピックページで演習やプログラミングプロジェクトを確認してください。
