Office.js Dialog Box Path Using React Router

Question

I am using the Office.context.ui.displayDialogAsync method in Office.js to create a popup that allows the user to login.

I used the yeoman generator to create a React template for the Add-in. I could not find an Auth0 example using Office.js and React, so I used this example which does not use react: https://github.com/OfficeDev/Office-Add-in-Auth0

To display the dialog box I pass the displayDialogAsync method a url that looks like: https://localhost:3000/src/taskpane/popup.html.

The react way I thought of would be creating a react compoennt for the popup and then using react router (Hash router not Browser Router How to configure Office-js excel react add-in to use react-router-dom or alternative solutions?) to make the component accessible at {taskpane endpoint}/popup like on a website.

The addin locally runs at https://localhost:3000/taskpane.html so I tried to pass the url https://localhost:3000/taskpane.html/#popup but the popup is not routed to my component like it would on a normal react website. Instead I get a 404 error.

My question is do I need to add some additional configuration for this to work, or is it just not possible in Office.js.

Answer 1

Microsoft recommends that you not pass a route to the displayDialogAsync method. See this best practice: Best practices for using the Office Dialog API in an SPA.