How to configure Office-js excel react add-in to use react-router-dom or alternative solutions?

Question

So I'm trying to set up an Office-js excel add-in using react (using the yeoman office-js generator found here https://github.com/OfficeDev/generator-office) and am running into issues configuring the add-in to use multiple routes. Doesn't look like traditional React routing works right out of the box (currently trying to use react-router-dom). Anybody know how I'd go about doing this? In particular, looking to see how I should configure some sort of routes, webpack.config.js, and the manifest.xml.

Would love to load up, for example, something like a LandingComponent on route=[baseUrl]/, and something like SignupComponent on [baseUrl]/signup.

For regular old React, what I'm trying to do would look something like this

const Routes = () => (
  <div>
    <Route path="/" exact component={LandingComponent} />
    <Route path="/signup" exact component={SignupComponent} />
  </div>
)

Key pieces of code I suspect would require modification would involve probably something in webpack.config.js (painfully new to actually configuring webpack, not sure if I will need to deal with this guy),

manifest.xml

<DefaultSettings>
    <SourceLocation DefaultValue="https://localhost:3000/taskpane.html"/>
</DefaultSettings>

Also I'm looking into doing things like removing the '.html' from the URL above (the goal being that the addin should load the landing by default at 'https://localhost:3000/', and you can nav via buttons to 'https://localhost:3000/signup', whereas the addin is currently loading 'https://localhost:3000/taskpane.html' by default).

Sorry for the word vomit, still very new at this and not sure what is and isn't possible!

Routing should work in an Office add-in the same as it works in any React web app. Please provide some details about what is going wrong. — Rick Kirkham
– Rick Kirkham, Commented Sep 24, 2019 at 15:45
Hi Rick, believe it or not that stick in the sand of a hard fact was really relieving to hear, I think it might just be down to me getting a better hold of webpack and figuring that out. Will just tinker a bit more, can probably say this is no longer an office-js issue. Thanks! Appreciate it! — sch
– sch, Commented Sep 24, 2019 at 17:43
@sch. From my experience you no need to do anything with webpack. You have to add HashLocationStrategy technique on your routing. Because it is loading inside office iframe Router will not work. But if you add the HashLocationStrategy then it will work. — Ragavan Rajan
– Ragavan Rajan, Commented Sep 24, 2019 at 23:55
reacttraining.com/react-router/web/api/HashRouter. pls have a look. Hope it will save your time from exploring webpack — Ragavan Rajan
– Ragavan Rajan, Commented Sep 24, 2019 at 23:55
@RagavanRajan appreciate the tip! It came in handy for sure! — sch
– sch, Commented Sep 27, 2019 at 2:42

Tyler · Accepted Answer · 2019-11-29 10:00:38Z

9

I had the same issue, and the solution I used was essentially following @Ragavan Rajan's solution of using HashRouter instead of BrowserRouter.

import {
  HashRouter as Router,
  Switch,
  Route
} from "react-router-dom";


...
render() {
return (
<Router>
  <div>
    <Switch>
      <Route exact path="/main" component={Home} />
    </Switch>
  </div>
</Router>
);
}

This answer provides more insight. Ultimately, two functions which are used in maintaining a history of where you have navigated are set to null:

window.history.replaceState = null;
window.history.pushState = null;

and when you try to use the normal browser routing, an exception if thrown because these functions don't exist, which doesn't happen with Hash Routing.

answered Nov 29, 2019 at 10:00

Tyler

1,2932 gold badges23 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

kotpal Over a year ago

Latest HashRouter (in react-router-dom) seems to be using replaceState indirectly via react-router (which is calling into history).

Uncaught TypeError: p.replaceState is not a function         at createHashHistory (index.js?3c0a:11)         at HashRouter (index.js?066a:5)         at HashRouter (react-hot-loader.development.js?9cb3:830)

It is probably because I am using react-hot-loader, but using HashRouter didn't work for me.

nmu Over a year ago

@kotpal the same thing was happening to me, what fixed it was using the v5 version of react-router

Edward Over a year ago

@kotpal Do you find the solution to enable react-router in excel javascript addin? I tried both ways, and fail to make it work. Could you help to check my issue on SO.

B.Ramburn Over a year ago

Just to add to this... You need to have react-router-dom v^5 and you must have the exact attribute or else it will not work. I'm running on React 16 with [email protected]

Pahima7 · Accepted Answer · 2022-06-20 06:02:38Z

2

Another option is to simply override the override 😁

<!-- Office JavaScript API -->
<script type="text/javascript">
    // Office js deletes window.history.pushState and window.history.replaceState. Cache them and restore them
    window.historyBackup = {
        replaceState: window.history.replaceState,
        pushState: window.history.pushState
    };
</script>

<script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>

<script type="text/javascript">
    window.history.replaceState = window.historyBackup.replaceState;
    window.history.pushState = window.historyBackup.pushState;
</script>

answered Jun 20, 2022 at 6:02

Pahima7

1811 silver badge8 bronze badges

Collectives™ on Stack Overflow

How to configure Office-js excel react add-in to use react-router-dom or alternative solutions?

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related