3

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!

sch
  • 31
  • 1
  • 2
  • 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 Sep 24 '19 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 Sep 24 '19 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 Sep 24 '19 at 23:55
  • 1
    https://reacttraining.com/react-router/web/api/HashRouter. pls have a look. Hope it will save your time from exploring webpack – Ragavan Rajan Sep 24 '19 at 23:55
  • @RagavanRajan appreciate the tip! It came in handy for sure! – sch Sep 27 '19 at 02:42

2 Answers2

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.

Tyler
  • 1,163
  • 16
  • 37
  • 2
    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. – kotpal Mar 10 '21 at 20:18
  • @kotpal the same thing was happening to me, what fixed it was using the v5 version of react-router – nmu Feb 24 '22 at 08:37
  • @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](https://stackoverflow.com/questions/74384751/how-to-configure-office-js-excel-react-template-with-react-router-dom) on SO. – Edward Nov 10 '22 at 06:05
  • 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 react-router-dom@5.3.0 – B.Ramburn Jun 11 '23 at 21:24
1

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>
Pahima7
  • 46
  • 7