React Routerでコンテキストルートを設定する方法

React Routerでコンテキストルートを設定する方法

Reactでコンテキストルートを設定するには、React Routerを使うのが一般的です。
React Routerを使用すると、SPA（シングルページアプリケーション）内でルーティングを簡単に管理できます。
以下は、React Routerを使って基本的なコンテキストルートを設定する手順です。

1. React Routerのインストール

npmの場合

npm install react-router-dom

yarnの場合

yarn add react-router-dom

2. 基本的なセットアップ

App.jsまたはメインのコンポーネントファイルで、React Routerのコンポーネントをインポートして設定します。

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

function App() {
 return (
   <Router>
     <Switch>
       <Route exact path="/" component={Home} />
       <Route path="/about" component={About} />
     </Switch>
   </Router>
 );
}

export default App;

3. コンテキストルートの設定

特定のコンテキストでルートをグループ化するには、Routeコンポーネントをネストして使用します。
例として、/dashboardというコンテキストを設定します。

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

function App() {
 return (
   <Router>
     <Switch>
       <Route exact path="/" component={Home} />
       <Route path="/about" component={About} />
       <Route path="/dashboard">
         <Switch>
           <Route exact path="/dashboard" component={DashboardHome} />
           <Route path="/dashboard/settings" component={DashboardSettings} />
           <Route path="/dashboard/profile" component={DashboardProfile} />
         </Switch>
       </Route>
     </Switch>
   </Router>
 );
}

export default App;

4. リンクの設定

ルート間のナビゲーションには、LinkまたはNavLinkコンポーネントを使用します。

import React from 'react';
import { Link } from 'react-router-dom';

function DashboardHome() {
 return (
   <div>
     <h2>Dashboard Home</h2>
     <nav>
       <ul>
         <li><Link to="/dashboard/settings">Settings</Link></li>
         <li><Link to="/dashboard/profile">Profile</Link></li>
       </ul>
     </nav>
   </div>
 );
}

export default DashboardHome;

このようにして、Reactアプリケーション内でコンテキストルートを設定し、異なるルート間で簡単にナビゲートできるようになります。