#reactjs #redux #ms-word #react-router #office-addins
#reactjs #сокращение #ms-word #react-маршрутизатор #office-дополнения
Вопрос:
Я пытаюсь проложить маршрут в веб-надстройке word, но он говорит, что 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);
});
}
введите описание изображения здесь
Не имеет значения, добавил ли я какой-либо переключатель или что-то еще. Он даже не достигает этого кода.
в дополнение к этому, иногда, если я просто импортирую некоторые библиотеки, но не использую их, снова это показывает, что officejs загружен не полностью.
Если кто-нибудь может помочь мне с базовой маршрутизацией и управлением состоянием в этом, тогда это было бы здорово. Я застрял здесь за последние 7 дней.
Ответ №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>
);
}