Reactjs 如何在react word web加载项中进行路由?

Reactjs 如何在react word web加载项中进行路由?,reactjs,redux,ms-word,react-router,office-addins,Reactjs,Redux,Ms Word,React Router,Office Addins,我试图在word web加载项中进行路由,但它表示office js未完全加载,尽管我已添加了office js初始化的必要条件 下面是index.js部分,我试图在组件之间进行路由。但我一介绍它,日志就开始显示预期的对象和未加载的Office.js: import "office-ui-fabric-react/dist/css/fabric.min.css"; import App from "./components/App"; import { A

我试图在word web加载项中进行路由,但它表示office js未完全加载,尽管我已添加了office js初始化的必要条件

下面是index.js部分,我试图在组件之间进行路由。但我一介绍它,日志就开始显示预期的对象和未加载的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);
  });
}
导入“office ui fabric react/dist/css/fabric.min.css”; 从“/components/App”导入应用程序; 从“react hot loader”导入{AppContainer}; 从“officeui/lib/Icons”导入{initializecons}; 从“React”导入*作为React; 从“react dom”导入*作为react dom; 从“react Router dom”导入{Router}; 从“历史”导入{createBrowserHistory}; /*全局应用容器、组件、文档、办公室、模块、React、require*/ const history=createBrowserHistory(); 初始化图标(); 让IsofificeInitialized=false; const title=“Contoso任务窗格加载项”; 常量呈现=组件=>{ ReactDOM.render(

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

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


如果有人能在这方面帮助我进行基本的路由和状态管理,那就太好了。我从过去7天就被困在这里。

你应该使用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>
);
}
导入{
HashRouter作为路由器,
转换
路线
}从“反应路由器dom”;
...
render(){
返回(
);
}