✉️

Reactで開発したOutlookアドインのルーティング機能を実装する

2023/01/08に公開約3,200字

はじめに

OutlookのアドインをReactを用いて開発した際、routingによる画面遷移が上手く機能せず時間を溶かしたので、その時の解決法を残しておきます。

アドインの雛形の作成は下記記事にて紹介しているので参考にしてください。
https://zenn.dev/maximum_maximum/articles/d1dac92ce8eab3

本稿では上記記事内容をもとに作成したプロジェクトに修正を加えていきます。

環境

node v16.13.0

手順

留意点は2つあります。

  1. 対応するreact-router-domモジュールのバージョンは5系
  2. HashRouterを用いる

以下、細かく手順を追っていきます。

1. 対応するreact-router-domモジュールのバージョンは5系

Reactのデファクトのルーティングライブラリにreact-router-domがあります。
yo officeコマンドにて生成されるReactプロジェクトは17系で、また対応するreact-router-domは最新の6系(2023年1月時点)ではなく5系のようです。

バージョンを指定してモジュールをインストールします。

$ npm install react-router-dom@5.3.3

2. HashRouterを用いる

App.tsxを関数コンポーネントベースに書き直し、シンプルなルーティングを実装します。

src/taskpane/components/App.tsx
import React, { VFC } from "react";
import Progress from "./Progress";
import { HashRouter, Route, Switch, Link } from "react-router-dom";

type AppProps = {
  title: string;
  isOfficeInitialized: boolean;
};

const Home: VFC = () => {
  return <h2>Home</h2>;
};

const About: VFC = () => {
  return <h2>About</h2>;
};

const Users: VFC = () => {
  return <h2>Users</h2>;
};

const App = (props: AppProps) => {
  const { title, isOfficeInitialized } = props;
  return (
    <>
      {isOfficeInitialized ? (
        <HashRouter>
          <div>
            <nav>
              <ul>
                <li>
                  <Link to="/">Home</Link>
                </li>
                <li>
                  <Link to="/about">About</Link>
                </li>
                <li>
                  <Link to="/users">Users</Link>
                </li>
              </ul>
            </nav>
            <Switch>
              <Route path="/about">
                <About />
              </Route>
              <Route path="/users">
                <Users />
              </Route>
              <Route path="/">
                <Home />
              </Route>
            </Switch>
          </div>
        </HashRouter>
      ) : (
        <Progress
          title={title}
          logo={require("./../../../assets/logo-filled.png")}
          message="Please sideload your addin to see app body."
        />
      )}
    </>
  );
};

export default App;

ここで、react-router-domモジュールの中から、BrowserRouterではなくHashRouterを用いてルーティングの実装を行います。

動作確認

npm startしてサーバーを立ち上げると

Home, About, Usersリンクをクリックすることでボルド文字が切り替わり、ルーティングの実装ができていることの確認ができました。

余談

最初BrowserRouterを用いて実装していた際、ルーティングによる遷移が行われませんでした。
https://stackoverflow.com/questions/72413795/routing-doesnt-work-in-react-outlook-add-in/73215315#73215315
こちらで回答しているように、デフォルトで生成されるtaskpane.htmlを修正することでルーティング自体は行われるようになりました。
しかし、ルーティングによる遷移先のリンク(上の例だとlocalhost:3000/taskpane.html/usersなど)にてリロードをかけると、Can't Get "/users"というエラーが吐かれてしまいました(恐らくこういった話によるものだと思っています。。)。

参考

使用したコード
https://github.com/maximum-maximum/outlook-addin-react-routing
https://zenn.dev/maximum_maximum/articles/d1dac92ce8eab3
https://stackoverflow.com/questions/72413795/routing-doesnt-work-in-react-outlook-add-in/73215315#73215315
https://v5.reactrouter.com/
https://blog.baseball.tokyo/archives/39

Discussion

ログインするとコメントできます