すべてのカテゴリ

ElectronアプリでReact/Vue Routerを使うには？前回は、Electron アプリでメニューバーをカスタマイズする方法をお伝えしました。 Web アプリを React や Vue のフレームワークを使って作る場合、ページの切り替えに「Router」を使う場合が多くなります。Vue の場合は Vue Router、React の場合、React Router（react-router-dom）を使う場合が多いと思います。Web ベースのアプリを Electron でデスクトップのアプリにする場合は、この方法でページ（表示）を切り替える方が便利な場合があります。この記事は、React/Vue を使ってアプリを作る際に、React Router を使って表示を切り替える方法について解説します。React Router はハッシュヒストリを使う通常の Web 開発で React Router を使う場合は、「BrowserRouter」をインポートして使う場合が多いと思いますが、Electron と併用して利用する場合は、この使い方では動作しません。対策としては、ハッシュヒストリモード(Hash History)を使います。 Web アプリのトップレベルの記述例は以下のような感じで、「BrowserRouter」を「HashRouter」に置き換えるだけです。import React from "react";import { HashRouter, Route, Switch } from "react-router-dom";import Analyze from