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

问题

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!

回答1:

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.

来源：https://stackoverflow.com/questions/58071999/how-to-configure-office-js-excel-react-add-in-to-use-react-router-dom-or-alterna

标签

reactjs

office-js

react-router-dom