【发布时间】：2022-08-03 09:09:15
【问题描述】：
我使用 Yeoman generator 创建了一个新的 react Outlook 插件，并选择了 React-Typescript 任务窗格选项来创建插件模板。 我安装了 react router dom 版本 6.3.0 并编写了一些基本路由，就像我为常规 React 应用程序所做的那样。但是，它不起作用并一直给我一个空白页面，尽管相同的代码在普通的 react web 应用程序中工作正常。
我参考了以下链接并试图弄清楚，但它并没有解决我的问题：
- React Router in office JS excel causes white page
- Office.js nullifies browser history functions breaking history usage
- Routing doesn\'t seem to work in React based Addins
- How to configure Office-js excel react add-in to use react-router-dom or alternative solutions?
注意：加载项应加载到 outlook.com/outlook desktop application/mobile
这些是我到目前为止所做的更改
taskpane.html (src/taskpane/taskpane.html)
<script>
window.backupHistoryFunctions = {};
window.backupHistoryFunctions.pushState = window.history.pushState;
window.backupHistoryFunctions.replaceState = window.history.replaceState;
</script>
<!-- Office JavaScript API -->
<script type=\"text/javascript\" src=\"https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js\">
</script>
<script>
window.history.pushState = window.backupHistoryFunctions.pushState;
window.history.replaceState = window.backupHistoryFunctions.replaceState;
console.log(window.history.replaceState)
</script>
index.tsx (src/taskpane/index.tsx)
const render = (Component) => {
ReactDOM.render(
<React.StrictMode>
<HashRouter basename=\"/\">
<AppContainer>
<ThemeProvider>
<Component title={title} isOfficeInitialized={isOfficeInitialized} />
</ThemeProvider>
</AppContainer>
</HashRouter>
</React.StrictMode>,
document.getElementById(\"container\")
);
};
/* Render application after Office initializes */
Office.onReady(() => {
isOfficeInitialized = true;
render(App);
});
App.tsx (src/taskpane/components/App.tsx)
import * as React from \"react\";
import { Routes, Route} from \"react-router-dom\";
import About from \"../pages/about\";
import Expenses from \"../pages/expenses\";
import Invoices from \"../pages/invoices\";
export default function App() {
return (
<div className=\"App\">
<Routes>
<Route path=\"/\" element={<About/>} />
<Route path=\"expenses\" element={<Expenses />} />
<Route path=\"invoices\" element={<Invoices />} />
</Routes>
</div>
);
}
about.tsx (src/taskpane/pages/about.tsx)
import * as React from \'react\'
import { Link } from \'react-router-dom\'
export default function About() {
return (
<div>
About
<br/>
<Link to=\"/expenses/\">Link to Expenses</Link>
</div>
)
}
费用.tsx (src/taskpane/pages/expenses.tsx)
import * as React from \"react\";
import {Link} from \'react-router-dom\';
export default function Expenses() {
return (
<div>
<h2>Expenses</h2>
<br/>
<Link to=\"/invoices/\">Link to Invoices</Link>
</div>
);
}
invoices.tsx (src/taskpane/pages/invoices.tsx)
import * as React from \"react\";
import { Link } from \"react-router-dom\";
export default function Invoices() {
return (
<div>
<h2>Invoices</h2>
<br/>
<Link to=\"/\">Link to About</Link>
</div>
);
}
这些是我的依赖项和 devDependencies包.json文件
\"dependencies\": {
\"@fluentui/react\": \"^8.52.3\",
\"@microsoft/office-js\": \"^1.1.73\",
\"axios\": \"^0.26.1\",
\"core-js\": \"^3.9.1\",
\"es6-promise\": \"^4.2.8\",
\"html5-history-api\": \"^4.2.10\",
\"office-ui-fabric-core\": \"^11.0.0\",
\"react\": \"^17.0.2\",
\"react-dom\": \"^17.0.2\",
\"react-router-dom\": \"^6.3.0\",
\"regenerator-runtime\": \"^0.13.7\"
},
\"devDependencies\": {
\"@babel/core\": \"^7.13.10\",
\"@babel/preset-typescript\": \"^7.13.0\",
\"@types/office-js\": \"^1.0.180\",
\"@types/office-runtime\": \"^1.0.17\",
\"@types/react\": \"^17.0.39\",
\"@types/react-dom\": \"^17.0.11\",
\"@types/react-hot-loader\": \"^4.1.1\",
\"@types/webpack\": \"^4.4.34\",
\"@types/webpack-dev-server\": \"^4.1.0\",
\"acorn\": \"^8.5.0\",
\"babel-loader\": \"^8.2.2\",
\"copy-webpack-plugin\": \"^9.0.1\",
\"eslint\": \"^7.20.0\",
\"eslint-plugin-office-addins\": \"^2.0.0\",
\"eslint-plugin-react\": \"^7.28.0\",
\"file-loader\": \"^6.2.0\",
\"html-loader\": \"^2.1.2\",
\"html-webpack-plugin\": \"^5.3.2\",
\"less\": \"^3.9.0\",
\"less-loader\": \"^10.0.1\",
\"office-addin-cli\": \"^1.3.5\",
\"office-addin-debugging\": \"^4.3.8\",
\"office-addin-dev-certs\": \"^1.7.7\",
\"office-addin-lint\": \"^2.0.0\",
\"office-addin-manifest\": \"^1.7.7\",
\"office-addin-prettier-config\": \"^1.1.4\",
\"os-browserify\": \"^0.3.0\",
\"process\": \"^0.11.10\",
\"source-map-loader\": \"^3.0.0\",
\"ts-loader\": \"^9.2.5\",
\"typescript\": \"^4.3.5\",
\"webpack\": \"^5.50.0\",
\"webpack-cli\": \"^4.8.0\",
\"webpack-dev-server\": \"4.7.3\"
},
这些是控制台错误：
-
我认为这与 office.js 无关，而是更普遍的 react-router/react-hot-loader 问题。请参阅 stackoverflow.com/questions/70037167/… 和 github.com/gaearon/react-hot-loader/issues/1311 尝试在不等待 Office.onReady 的情况下呈现您的应用程序，并在浏览器而不是 Outlook 中运行您的应用程序。我怀疑你仍然会遇到问题。
-
嗨@markdon，我设法解决了这个问题，必须卸载 react-dom，安装特定版本的 react-router-dom 并稍微更改代码。感谢您的回复:)
-
嘿@Intern，你能把你的修复作为答案发布吗？
-
嗨@Aproove，我可以知道您是否也在构建办公室插件吗？我不认为我的解决方案对于普通的 react 应用程序是必要的，如果你正在构建一个普通的 react 应用程序，我建议你遵循 react-router v6 的最新教程:)
标签： reactjs react-router-dom office-js outlook-addin office-addins