如何配置 Office-js excel react 插件以使用 react-router-dom 或替代解决方案？

Question

因此，我正在尝试使用 react 设置 Office-js excel 加载项（使用此处找到的 yeoman office-js 生成器https://github.com/OfficeDev/generator-office）并且遇到配置添加的问题-in 使用多个路由。看起来不像传统的 React 路由开箱即用（目前正在尝试使用 react-router-dom）。有人知道我会怎么做吗？特别是，看看我应该如何配置某种路由、webpack.config.js 和 manifest.xml。

例如，希望加载类似于 route=[baseUrl]/ 上的 LandingComponent 和 [baseUrl]/signup 上的 SignupComponent 之类的东西。

对于常规的旧 React，我想做的事情看起来像这样

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

我怀疑需要修改的关键代码片段可能涉及 webpack.config.js 中的某些内容（对于实际配置 webpack 来说是新的痛苦，不确定我是否需要与这个人打交道），

清单文件

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

此外，我正在考虑做一些事情，比如从上面的 URL 中删除“.html”（目标是插件应该默认在“ https://localhost:3000/ ”加载登陆，你可以通过按钮导航到“ https://localhost:3000/signup ”，而插件当前默认加载“ https://localhost:3000/taskpane.html ”）。

对不起，呕吐这个词，在这方面仍然很新，不确定什么是可能的，什么是不可能的！

Answer 1

我遇到了同样的问题，我使用的解决方案基本上遵循@Ragavan Rajan 的使用HashRouter而不是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>
);
}

这个答案提供了更多的见解。最终，用于维护您导航位置的历史记录的两个函数被设置为空：

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

而当你尝试使用普通的浏览器路由时，如果因为这些函数不存在而抛出异常，这不会发生在哈希路由中。