Reactでトップページを変更するには

reactでトップページを変更する方法について

プロジェクトの作成

まず作業の土台となるプロジェクトを作成します。

npx create-react-app プロジェクト名 
cd my-app

必要機能のインストール

下記の機能をインストールします

npm install react-router-dom

これで諸準備が整いました。

App.jsの編集

基本的にReactにおいて初期状態でApp.jsがトップページとなっています。

下記のようにApp.jsの⓵⓶⓷を編集することでHomePage.jsがトップページとなります。

App.js

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
// ⓵ルーティング機能の追加
import HomePage from './HomePage';
//　⓶トップページコンポーネントの追加
// pagesフォルダ内に設定した場合
// import HomePage from './pages/HomePage';となります

function App() {
    return (
        <Router>
            <Routes>
                <Route path="/" element={<HomePage />} />       
                {/* ⓷トップページへのルーティング */}
            </Routes>
        </Router>
    );
}

export default App;

下記のように設定すれば完成です！

Homepage.js

import React from 'react';

function HomePage() {
    return (
        <div>
            <h1>トップページへようこそ！</h1>
        </div>
    );
}

export default HomePage;