React Router を使用して単一ページのアプリを構築する方法
シングル ページ アプリケーション (SPA) は、既存の Web ページを Web サーバーからの新しい情報で動的に書き換える Web サイトまたは Web アプリケーションです。
React アプリケーションでは、コンポーネントがサイト コンテンツを取得し、それをプロジェクト内の 1 つの HTML ファイルにレンダリングします。
React Router は、選択したコンポーネントに移動し、HTML ファイルにレンダリングするのに役立ちます。これを使用するには、React Router を設定して React アプリケーションと統合する方法を知る必要があります。
React ルーターのインストール方法
JavaScript パッケージ マネージャーである npm を使用して React ルーターを React プロジェクトにインストールするには、プロジェクト ディレクトリで次のコマンドを実行します。
npm i react-router-dom
または、ライブラリ パッケージをオフラインでインストールできるパッケージ マネージャーである Yarn を使用してパッケージをダウンロードすることもできます。
Yarn を使用して React Router をインストールするには、次のコマンドを実行します。
yarn add react-router-dom@6
React ルーターのセットアップ
React Router を構成してアプリケーションで使用できるようにするには、 index.jsファイル内のreact-router-domからBrowserRouterをインポートし、 BrowserRouter要素でアプリ コンポーネントをラップします。
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<BrowserRouter>
<App />
</BrowserRouter>
);
アプリ コンポーネントをBrowserRouter要素にラップすると、アプリ全体が Router の機能に完全にアクセスできるようになります。
他のコンポーネントへのルーティング
アプリケーションで Router を設定したら、先に進んでアプリ コンポーネントを作成し、それらをルーティングして、レンダリングする必要があります。次のコードは、「Home」、「About」、および「Blog」という名前のコンポーネントをインポートして作成します。また、 react-router-domからRouteおよびRoutes要素をインポートします。
Appコンポーネント内でルートを定義します。
import { Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Blog from './Blog';
function App() {
return (
<Routes>
<Route path='/' element={ <Home /> } />
<Route path='/about' element={ <About /> } />
<Route path='/blog' element={ <Blog /> }/>
</Routes>
)
}
export default App;
Appコンポーネントは、他のコンポーネントで記述したすべてのコードをレンダリングするメイン コンポーネントです。
Routes要素は、アプリ コンポーネントで作成する個々のルートをラップする親要素です。Route要素は、単一のルートを作成します。pathとelementの 2 つの prop 属性を取ります。
path属性は、目的のコンポーネントの URL パスを定義します。上記のコード ブロックの最初の Route では、バックスラッシュ (/) をパスとして使用しています。これは React が最初にレンダリングする特別なルートであるため、アプリケーションを実行するとHomeコンポーネントがレンダリングされます。このシステムを、React コンポーネントでの条件付きレンダリングの実装と混同しないでください。このパス属性には任意の名前を付けることができます。
element属性は、Route がレンダリングするコンポーネントを定義します。
React Router の Link コンポーネントの操作
リンクコンポーネントは、さまざまなルートをナビゲートするために使用される React Router コンポーネントです。これらのコンポーネントは、作成したさまざまなルートにアクセスします。
例えば：
import { Link } from 'react-router-dom';
function Home() {
return (
<div>
<Link to='/about'>About page</Link>
<Link to='/blog'>Blog page</Link>
<h1>This is the Home Page<h1/>
</div>
)
}
export default Home;
リンクコンポーネントは、HTML アンカー タグ<a>とほぼ同じで、「href」の代わりに「to」という名前の属性を使用するだけです。リンクコンポーネントは、対応するパス名を属性として使用してルートに移動し、ルートのコンポーネントをレンダリングします。
ネストされたルーティングとその実装方法
React Router はネストされたルーティングをサポートしているため、複数のルートを単一のルートにラップできます。これは主に、ルートの URL パスに類似性がある場合に使用されます。
ルーティングするコンポーネントを作成したら、アプリコンポーネントでそれぞれのコンポーネントに対して個別のルートを作成します。
例えば：
import { Routes, Route } from 'react-router-dom';
import Articles from './Articles';
import NewArticle from './NewArticle';
import ArticleOne from './ArticleOne';
function App() {
return (
<Routes>
<Route path='/article' element={ <Articles /> }/>
<Route path='/article/new' element={ <NewArticle /> }/>
<Route path='/article/1' element={ <ArticleOne /> }/>
</Routes>
)
}
export default App;
上記のコード ブロックは、作成されたコンポーネントArticles、NewArticle、およびArticleOneをインポートしてルーティングします。3 つのルートの URL パスにはいくつかの類似点があります。
NewArticleルートのパス名は、 Articlesルートのパス名と同じように始まり、バックスラッシュ (/) と「new」という単語 (/new) が追加されます。ArticlesルートとArticleOneルートのパス名の唯一の違いは、 ArticleOneコンポーネントのパス名の末尾にあるスラッシュ (/1)です。
3 つのルートを現在の状態のままにしておくのではなく、ネストすることができます。
そのようです：
import { Routes, Route } from 'react-router-dom';
import Articles from './Articles';
import NewArticle from './NewArticle';
import ArticleOne from './ArticleOne';
function App() {
return (
<Routes>
<Route path='/article'>
<Route index element={ <Articles /> }/>
<Route path='/article/new' element={ <NewArticle /> }/>
<Route path='/article/1' element={ <ArticleOne /> }/>
</Route>
</Routes>
)
}
export default App;
3 つの個別の Route を 1 つのRoute要素にラップしました。親Route要素にはpath属性のみがあり、レンダリングするコンポーネントを定義する要素属性がないことに注意してください。最初の子Route要素のindex属性は、親Routeの URL パスに移動したときにこのRouteがレンダリングされることを指定します。
コードを改善し、保守しやすくするには、ルートをコンポーネントで定義し、それをアプリコンポーネントにインポートして使用する必要があります。
例えば：
import { Routes, Route } from 'react-router-dom';
import Articles from './Articles';
import NewArticle from './NewArticle';
import ArticleOne from './ArticleOne';
function ArticleRoutes() {
return (
<Routes>
<Route index element={ <Articles /> }/>
<Route path='/article/new' element={ <NewArticle /> }/>
<Route path='/article/1' element={ <ArticleOne /> }/>
</Routes>
)
}
export default ArticleRoutes;
上記のコード ブロックのコンポーネントには、以前はアプリ コンポーネントにあったネストされたルートが含まれています。コンポーネントを作成したら、アプリコンポーネントにインポートし、単一のRoute要素を使用してルーティングする必要があります。
例えば：
import { Routes, Route } from 'react-router-dom';
import ArticleRoutes from './ArticleRoutes';
function App() {
return (
<Routes>
<Route path='/article/*' element={ <ArticleRoutes /> }>
</Routes>
)
}
export default App;
最後のルートコンポーネントでは、ルートのパス名の末尾にバックスラッシュとアスタリスク記号を追加することで、パス名が(/article)で始まるすべてのパス名に対応するようにします。
React Router には他にもあります
これで、React Router を使用して、React.js で単一ページ アプリケーションを構築する方法の基本に精通しているはずです。
React Router ライブラリには、Web アプリケーションを構築する際の開発者のエクスペリエンスをより動的にする多くの機能が用意されています。
コメントを残す