如何配置 Office-js excel react 插件以使用 react-router-dom 或替代解决方案? [英] How to configure Office-js excel react add-in to use react-router-dom or alternative solutions?

问题描述

所以我正在尝试使用 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="/" 精确组件={LandingComponent}/><Route path="/signup" 精确组件={SignupComponent}/>

)

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

manifest.xml

<SourceLocation DefaultValue="https://localhost:3000/taskpane.html"/></默认设置>

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

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

解决方案

我遇到了同样的问题，我使用的解决方案基本上遵循@Ragavan Rajan 使用 HashRouter 而不是 的解决方案BrowserRouter.

import {HashRouter 作为路由器，转变，路线来自反应路由器-dom"；...使成为() {返回 (<路由器><div><开关><路由精确路径="/main" component={Home}/></开关>

</路由器>);}

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

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

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

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!

解决方案

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.

这篇关于如何配置 Office-js excel react 插件以使用 react-router-dom 或替代解决方案?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！