Reactで画面遷移をする方法

Reactは、コンポーネントベースのライブラリであり、Webアプリケーションの構築に適しています。Reactを使用すると、ユーザーがアプリケーション内で移動する方法を提供する必要があります。この記事では、Reactで画面遷移を実装する方法について説明します。

React Routerを使用する

React Routerは、Reactアプリケーション内で画面遷移を行うためのライブラリです。React Routerを使用すると、コンポーネントベースのアプリケーションで簡単にルーティングを設定できます。

React Routerを使用するには、react-router-domをインストールする必要があります。

npm install react-router-dom

インストールが完了したら、BrowserRouterコンポーネントを使用してアプリケーションのルートを設定します。

import { BrowserRouter, Route, Switch } from 'react-router-dom';

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

上記の例では、BrowserRouterコンポーネントでルートを設定しています。Switchコンポーネントは、ルート内でのパスのマッチングを制御します。各Routeコンポーネントには、pathとcomponentプロパティがあります。pathプロパティは、ルートのパスを指定し、componentプロパティは、ルートがマッチした場合にレンダリングするコンポーネントを指定します。

プログラム的に遷移する

React Routerを使用すると、プログラム的に画面遷移をすることもできます。historyオブジェクトを使用して、履歴スタックに新しいエントリを追加したり、過去のエントリに戻ったりすることができます。

import { useHistory } from 'react-router-dom';

function Example() {
  const history = useHistory();

  function handleClick() {
    history.push('/newpage');
  }

  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}

上記の例では、useHistoryフックを使用してhistoryオブジェクトを取得しています。handleClick関数内で、history.push()メソッドを使用して、新しいページに遷移しています。

まとめ

React Routerを使用すると、Reactア
プリケーション内で画面遷移を実装することができます。BrowserRouterコンポーネントを使用してルートを設定し、Routeコンポーネントを使用して各ページのコンポーネントを指定します。また、useHistoryフックを使用してプログラム的に画面遷移を実装することもできます。

画面遷移は、Webアプリケーションにおいて重要な機能の一つです。React Routerを使用することで、コンポーネントベースのアプリケーションで簡単に画面遷移を実装することができます。是非、React Routerを使用して画面遷移を実装してみてください。