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

Question

因此，我正在尝试使用 react 设置 Office-js excel 加载项（使用在此处找到的 yeoman office-js 生成器 https://github.com/OfficeDev/generator-office），并且在配置加载项以使用多个路由时遇到了问题。看起来不像传统的 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 来说非常新，不确定我是否需要与这个人打交道），

manifest.xml

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

此外，我正在考虑从上面的 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>
);
}

This answer 提供更多见解。最终，用于维护您导航过的历史记录的两个函数设置为 null：

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

当您尝试使用正常的浏览器路由时，如果由于这些功能不存在而引发异常，哈希路由不会发生这种情况。