Reactでのページ遷移とナビゲーションの方法

1. プログラムマニュアルによるページ遷移: Reactでは、react-routerというライブラリを使用して、ページの遷移とナビゲーションを実装することができます。react-routerをインストールして、ルーティング機能を追加しましょう。

npm install react-router-dom

以下は、react-routerを使用した基本的なルーティングの例です。

import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
const Home = () => <h1>ホームページ</h1>;
const About = () => <h1>アバウトページ</h1>;
const App = () => {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">ホーム</Link>
          </li>
          <li>
            <Link to="/about">アバウト</Link>
          </li>
        </ul>
      </nav>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
};
export default App;

上記の例では、react-router-domのBrowserRouterを使用して、Routerコンポーネントを作成しています。Linkコンポーネントを使用して、ナビゲーションリンクを作成し、SwitchとRouteコンポーネントを使用して、対応するコンポーネントを表示します。

2. プログラムマニュアルを使用しないページ遷移: もしあなたがルーティングライブラリを使わずにページ遷移を実現したい場合、以下の例のようにwindow.locationオブジェクトを使用することもできます。

import React from 'react';
const Home = () => {
  const navigateToAbout = () => {
    window.location.href = '/about';
  };
  return (
    <div>
      <h1>ホームページ</h1>
      <button onClick={navigateToAbout}>アバウトページへ</button>
    </div>
  );
};
const About = () => <h1>アバウトページ</h1>;
const App = () => {
  return (
    <div>
      <Home />
      <About />
    </div>
  );
};
export default App;

上記の例では、navigateToAbout関数を使用して、window.location.hrefを変更してアバウトページに遷移しています。

これらはReactでのページ遷移とナビゲーションの一般的な方法のいくつかです。react-routerを使用する方法は柔軟で、多くの高度な機能を提供しますが、シンプルな遷移の場合はwindow.locationを使用する方法も便利です。お使いの特定の要件に基づいて、最適な方法を選択してください。