时间戳

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

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

问题描述

因此，我正在尝试使用 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 来说非常新，不确定我是否需要与这个人打交道），

清单.xml

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

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

对不起呕吐这个词，在这方面还是很新的，不知道什么是可能的，什么是不可能的！

标签： reactjsoffice-jsreact-router-dom

解决方案

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

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

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

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

推荐阅读