Reactで開発したOutlookアドインのルーティング機能を実装する
はじめに
OutlookのアドインをReactを用いて開発した際、routingによる画面遷移が上手く機能せず時間を溶かしたので、その時の解決法を残しておきます。
アドインの雛形の作成は下記記事にて紹介しているので参考にしてください。
本稿では上記記事内容をもとに作成したプロジェクトに修正を加えていきます。
環境
node v16.13.0
手順
留意点は2つあります。
- 対応するreact-router-domモジュールのバージョンは5系
- 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を関数コンポーネントベースに書き直し、シンプルなルーティングを実装します。
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を用いて実装していた際、ルーティングによる遷移が行われませんでした。
こちらで回答しているように、デフォルトで生成されるtaskpane.htmlを修正することでルーティング自体は行われるようになりました。
しかし、ルーティングによる遷移先のリンク（上の例だとlocalhost:3000/taskpane.html/usersなど）にてリロードをかけると、Can't Get "/users"というエラーが吐かれてしまいました（恐らくこういった話によるものだと思っています。。）。
参考
使用したコード
Discussion