Reactで複数ページを作成する方法

React Routerを使用する方法: React RouterはReactのルーティングライブラリであり、複数のページを作成するために非常に便利です。以下は、React Routerを使用してページ遷移を実現する基本的な例です。

まず、React Routerをインストールします:

npm install react-router-dom

次に、ルーティングを設定するために、App.jsファイルで以下のようにコードを記述します:

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import HomePage from './HomePage';
import AboutPage from './AboutPage';
import ContactPage from './ContactPage';
function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={HomePage} />
        <Route path="/about" component={AboutPage} />
        <Route path="/contact" component={ContactPage} />
      </Switch>
    </Router>
  );
}
export default App;

上記の例では、HomePage、AboutPage、ContactPageという3つのコンポーネントを作成し、それぞれのパスに対応するルートを設定しています。

条件付きレンダリングを使用する方法: もう一つの方法は、条件付きレンダリングを使用してページを切り替える方法です。以下は、簡単な例です:

import React, { useState } from 'react';
import HomePage from './HomePage';
import AboutPage from './AboutPage';
import ContactPage from './ContactPage';
function App() {
  const [currentPage, setCurrentPage] = useState('home');
  const renderPage = () => {
    if (currentPage === 'home') {
      return <HomePage />;
    } else if (currentPage === 'about') {
      return <AboutPage />;
    } else if (currentPage === 'contact') {
      return <ContactPage />;
    }
  };
  return (
    <div>
      <button onClick={() => setCurrentPage('home')}>Home</button>
      <button onClick={() => setCurrentPage('about')}>About</button>
      <button onClick={() => setCurrentPage('contact')}>Contact</button>
      {renderPage()}
    </div>
  );
}
export default App;

上記の例では、currentPageステート変数を使用して現在のページを管理し、ボタンのクリックイベントに応じてページを切り替えています。

これらはReactで複数のページを作成するための一般的な方法のいくつかです。選択した方法に応じて、必要なページコンポーネントを作成し、適切なルーティングまたは条件付きレンダリングを実装してください。