UiPath Coded Appsでルーティングを活用する

UiPathユーザーの皆さん、UiPath Appsは使っていますか？
UiPath Appsとは、入力フォームなどUiPathプラットフォーム上で利用できるWeb画面を開発するツールです。
こちらは元々はローコードで開発する製品でしたが、2026年5月にTypeScriptで開発できるCoded Appsという機能がリリースされました。

Coded Appsのチュートリアルは @utanesuke氏の以下のシリーズ記事や公式ドキュメントをご参照ください。
UiPath Coded Apps TypeScript SDK入門（第1回）環境構築とセットアップ手順
UiPath Coded Apps TypeScript SDK入門（第2回）既存のサンプルプロジェクトの解説と活用方法
UiPath Coded Apps TypeScript SDK入門（第3回）Vibe CodingでConversationalAgentのChatアプリを作ろう
Coded Appsの公式ドキュメント

今回はReact + TypeScript + Viteの構成を利用するので@dlrudqls99氏の以下の記事も参考になると思います。
React TypeScript アプリにおける Node.js / npm / Vite / vite.config.ts の役割まとめ

今回は、そのCoded Appsを使ってWebアプリを開発する際にとても便利な機能であるルーティングの使い方をご紹介します！

そもそもルーティングとは？

簡単に言うとWebアプリの各画面に特定のパスを割り当てる仕組みのことです。
例えば、https://www.uipath.com/ja/product/low-code-app-studioというURLのようにWebアプリ内の特定の画面に/ja/product/low-code-app-studioというパスを割り当てることができます。
ルーティングを活用することで、Webアプリの特定の画面・機能をブックマークできたり特定の画面に直接飛べるURLを同僚に共有できるなどWebアプリのユーザビリティが向上します。（ルーティングを使っていないWebアプリではユーザーは常にトップぺージから操作しなければなりません。）

ルーティングの実装にはReact RouterのDeclarativeモードを利用します。

前提

Coded AppsでWebアプリを開発する場合はNode.js、npm、UiPath CLIが必要です。

Node.js、npmのインストール手順はUiPath Coded Apps TypeScript SDK入門（第1回）環境構築とセットアップ手順の「Node.js と npm のインストール」を参照してください。（「2. UiPath TypeScript SDK インストール手順」以降の手順は実施不要です。）

UiPath CLIのインストール手順は後ほど解説します。

なお、私は以下の環境で実施しました。

• Windows
• Node.js: 24.18.0
• npm: 11.16.0
• TypeScript: 5.9.3
• UiPath CLI: 1.197.1
• VS Code: 1.131.0 <- テキストエディタは何でも構いません
• PowerShell: 5.1.26100.8875

Reactアプリのプロジェクトを作成する

VS Codeでプロジェクトを作成するフォルダーを開きます。（私はデスクトップ配下に「CodedApps」というフォルダーを作成しました。）

ターミナル（ここではPowerShell）を開き以下のコマンドを実行します。（必要に応じてmy-appは任意のアプリケーション名に変更してください。参考：Vite公式ページ）

npm create vite@latest my-app -- --template react-ts --no-interactive

処理が終わるとmy-appフォルダーが生成され、Reactアプリのテンプレートが生成されます。

ここで、Reactアプリの起動確認をしてみましょう。
ターミナルで以下のコマンドを実行します。（my-appのところはプロジェクト生成時に指定したアプリ名になります。）

cd my-app
npm install
npm run dev

ブラウザーでhttp://localhost:5173にアクセスしてください。
以下のReactテンプレートページが表示されれば成功です。

起動確認ができたら、ターミナルでCtrl + Cを押下しReactアプリを停止します。

ルーティングを実装していく

ターミナルで以下のコマンドを実行しReact Routerをこのプロジェクトにインストールします。

npm install react-router

./src/main.tsxを以下の通り編集します。これにより、このWebアプリのトップページにApp()が表示されます。

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
+ import { BrowserRouter, Routes, Route } from 'react-router'
import './index.css'
import App from './App.tsx'

createRoot(document.getElementById('root')!).render(
  
  <StrictMode>
-    <App />
+    <BrowserRouter>
+      <Routes>
+        <Route path='/' element={<App />} />
+      </Routes>
+    </BrowserRouter>
  </StrictMode>,
)

ここで、ターミナルでnpm run devを実行しhttp://localhost:5173/にアクセスして動作確認してみましょう。

上記のように同じURLで同じ画面が表示されましたね。先ほどから変化はありませんが、今回は裏側ではルーティング経由でApp()が表示されています。

ここから、いよいよルーティング実装本番です。
http://localhost:5173/childpageというURLにアクセスするとChildPage()が表示されるようにしましょう。

./srcの中にChildPage.tsxというファイルを作成し以下のコードを貼り付けます。

export default function ChildPage() {
    return <h1>これはChildPage()です</h1>
}

そして、./src/main.tsxを以下の通りに変更します。

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { BrowserRouter, Routes, Route } from 'react-router'
import './index.css'
import App from './App.tsx'
+ import ChildPage from './ChildPage.tsx'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <BrowserRouter>
      <Routes>
        <Route path='/' element={<App />} />
+       <Route path='childpage' element={<ChildPage />} />
      </Routes>
    </BrowserRouter>
  </StrictMode>,
)

http://localhost:5173/childpageにアクセスしてみましょう。
先ほど作成したChildPage()が表示されましたね！

続いて、さらに一階層下のhttp://localhost:5173/childpage/grandchildpageにアクセスするとGrandChildPage()が表示されるようにしましょう。

先ほどと同様に./srcの中にGrandChildPage.tsxというファイルを作成します。
中身は以下のコードとしてください。

export default function GrandChildPage() {
    return <h1>これはGrandChildPage()です</h1>
}

そして、./src/main.tsxを以下の通りに変更します。

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
- import { BrowserRouter, Routes, Route } from 'react-router'
+ import { BrowserRouter, Routes, Route, Outlet } from 'react-router'
import './index.css'
import App from './App.tsx'
import ChildPage from './ChildPage.tsx'
+ import GrandChildPage from './GrandChildPage.tsx'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <BrowserRouter>
      <Routes>
        <Route path='/' element={<App />} />
-       <Route path='childpage' element={<ChildPage />} />
+       <Route path='childpage' element={<Outlet />}>
+           <Route index element={<ChildPage />} />
+           <Route path='grandchildpage' element={<GrandChildPage />} />
+       </Route>
      </Routes>
    </BrowserRouter>
  </StrictMode>,
)

Routeをネストした際は、子Routeは親Routeの<Outlet />の中に入ります。また、子Routeのindexは親RouteのURLを引き継ぎます。

実際の使い方としては、<Route path='childpage' element={<Outlet />}>のelementは子Route共通で使うテンプレートのコンポーネントを設定し、そのコンポーネントの中で子Route毎に表示する内容を変えたい箇所に<Outlet />を当て込みます。
ただし、今回はルーティングの使い方に焦点を当てているので説明を簡単にする観点から便宜上直接elementに<Outlet />を当て込んでいます。

改めて、http://localhost:5173/childpageとhttp://localhost:5173/childpage/grandchildpageにアクセスしてみましょう。

無事にルーティングが設定できていますね！

UiPath Coded Appsとして仕上げていく

動作確認はうまくいきましたが、このままだとただのReactアプリですね。
UiPath環境にデプロイしてこそUiPath Coded Appsと言えますので、最後にその仕上げを行っていきます。

もっというとUiPath TypeScript SDKを使ってUiPathの機能（認証、データベース、AIエージェント、RPA 等）を活用してこそUiPath Coded Appsと言えますが、今回は説明をできるだけ簡単にするためこのSDK利用に関する操作は割愛しています。）

まずはvite.config.tsに以下を追加します。

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vite.dev/config/
export default defineConfig({
+ base: './',
  plugins: [react()],
})

UiPath Coded Appsはデプロイするとhttps://{組織名}.uipath.host/{アプリ名（今回はmy-app）}というようにアプリ名のパスが追加されるためそのままデプロイしてしまうとCSSやJSファイルなどのアセットが読み込まれず正しく動作しません。
一方で、Coded Appsはデプロイ時にindexに<base href="/{アプリ名}/">を埋め込みます。
この設定を入れることで、viteにアセットの参照先をこのbase要素を起点にした相対パスに変えるよう伝え、アセットが問題なく読み込まれるようにします。

同様の理由で、React Routerにもベースパス（https://{組織名}.uipath.host/{アプリ名（今回はmy-app）}）を伝えなければいけません。

TypeScript上でベースパスを取得する関数を利用するため、以下のコマンドで@uipath/uipath-typescriptをインストールします。

npm install @uipath/uipath-typescript

./src/main.tsxに以下を追加します。

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
+ import { getAppBase } from '@uipath/uipath-typescript'
import { BrowserRouter, Routes, Route, Outlet } from 'react-router'
import './index.css'
import App from './App.tsx'
import ChildPage from './ChildPage.tsx'
import GrandChildPage from './GrandChildPage.tsx'

createRoot(document.getElementById('root')!).render(
  
  <StrictMode>
-   <BrowserRouter>
+   <BrowserRouter basename={getAppBase()}>
      <Routes>
        <Route path='/' element={<App />} />
        <Route path='childpage' element={<Outlet />}>
          <Route index element={<ChildPage />} />
          <Route path='grandchildpage' element={<GrandChildPage />} />
        </Route>
      </Routes>
    </BrowserRouter>
  </StrictMode>,
)

これでデプロイする準備は整いました。

ビルドとデプロイ

ビルドとデプロイを実施するため、以下のコマンドにてUiPath CLIとその中のツールcodedappをインストールします。（すでにインストール済の方は不要です。）

npm install -g @uipath/cli
uip tools install codedapp

最後に、一気にビルドとデプロイを実施していきます。（publishやdeployではパブリッシュ先フィード、デプロイ先フォルダーを聞かれるのでお好みの場所を選択してください。）

uip login
npm run build
uip codedapp pack dist -n {アプリ名(今回はmy-app)} --version 1.0.0
uip codedapp publish
uip codedapp deploy

UiPath Orchestratorでデプロイ先のフォルダーを確認してみましょう。

デプロイされていますね。実行ボタンを押してみましょう。

Reactアプリのテンプレート画面が表示されました！

最後に、ルーティングが正しく機能するか確認してみましょう。

ルーティングも問題なくできていますね！

おわりに

いかがでしたでしょうか？
今の時代、Coding Agentがすべて作ってくれるのでこういった細かい機能を理解する必要はないのかもしれませんが、Coding Agentを使う場合でもこのような機能の中身を知っておくことで、痒い所に手が届くソリューションが作れるのでは？と思い記事を書きました。
少しでも皆様のお役に立てば幸いです！

なお、React RouterにはDynamic Segments（URLのパスを動的にする機能、例：https://{my-org}.uipath.host/my-app/task/002の002の部分を動的にする）やuseSeachParams（URLに入れたパラメーターを読み取る機能、例：https://{my-org}.uipath.host/my-app/dashboard?keyword=uipathのkeyword=uipathを取得する）といったさらなる便利機能があるので、次回はこれらの使い方を解説したいと思います。

2026/8/7 追記
続編を作成しましたのでよかったらこちらも見てください。
UiPath Coded Appsでルーティングを活用する ～クエリ文字列・動的パラメーター活用編～