reactjs - 如何配置 Office-js excel react 加载项以使用 react-router-dom 或替代解决方案？

Question

因此，我正在尝试使用 React(使用此处找到的 yeoman office-js 生成器 https://github.com/OfficeDev/generator-office)设置 Office-js excel 加载项，但在配置加载项以使用多个路由时遇到问题。传统的 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 来说是痛苦的新事物，不确定我是否需要与这个人打交道)，

list .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提供更多见解。最终，用于维护导航位置历史记录的两个函数被设置为空:

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

当您尝试使用正常的浏览器路由时，如果抛出异常是因为这些函数不存在，而哈希路由不会发生这种情况。