如何在 React Word Web 加载项中路由？

Question

我正在尝试在 word web 加载项中路由，但它说 office js 未完全加载，即使我添加了 office js 初始化的必要条件。

下面是我试图在组件之间路由的 index.js 部分。但是我一介绍它，日志就开始显示 Object expected 并且 Office.js 未加载：

import "office-ui-fabric-react/dist/css/fabric.min.css";
import App from "./components/App";
import { AppContainer } from "react-hot-loader";
import { initializeIcons } from "office-ui-fabric-react/lib/Icons";
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Router } from "react-router-dom";
import { createBrowserHistory } from "history";
/* global AppCpntainer, Component, document, Office, module, React, require */

const history = createBrowserHistory();

initializeIcons();

let isOfficeInitialized = false;

const title = "Contoso Task Pane Add-in";

const render = Component => {
  ReactDOM.render(
    <AppContainer>
      <Router history={history}>
        <Component title={title} isOfficeInitialized={isOfficeInitialized} />
      </Router>
    </AppContainer>,
    document.getElementById("container")
  );
};

/* Render application after Office initializes */
Office.initialize = () => {
  isOfficeInitialized = true;
  render(App);
};

/* Initial render showing a progress bar */
render(App);

if (module.hot) {
  module.hot.accept("./components/App", () => {
    const NextApp = require("./components/App").default;
    render(NextApp);
  });
}

enter image description here

我是否添加了任何开关或任何东西都没有关系。它甚至没有到达那个代码。

除此之外，有时如果我只导入一些库但不使用它们，那么它再次显示我的 officejs 没有完全加载。

如果有人可以帮助我进行基本的路由和状态管理，那就太好了。我从过去 7 天开始就被困在这里。

Answer 1

你应该使用HashRouter：

import {
  HashRouter as Router,
  Switch,
  Route
} from "react-router-dom";

...
render() {
return (
<Router>
  <div>
    <Switch>
      <Route exact path="/main" component={Home} />
    </Switch>
  </div>
</Router>
);
}