Office JS excel 中的 React Router 导致白页

Question

我正在尝试使用 TypeScript 和 React 为 Excel 开发插件，但通往成功的道路非常艰难，因为 Office 插件的行为确实与 CRA React 样板 Web 应用程序不同。我为我的任务面板插件创建了一个 Yo Office typescript React 项目，在我的 App.tsx 中我有以下 JSX return 值：

import * as React from "react";
import {  Stack } from "office-ui-fabric-react";

import { HashRouter as Router, Route, Switch, Link} from 'react-router-dom';
import {FeedbackProvider}  from "./FeedbackContext";
import { Properties } from "./pages/Properties";
import { Translations } from "./pages/Translations";


export interface AppProps {
  title: string;
  isOfficeInitialized: boolean;
}

//Tryout feedback message interface for feedback messages
export interface FeedBackMessages {
  message: string,
  messageType: string,
  mVisible : boolean,
  onConfirm?: () => void,
  onCancel?: () => void
}

//this context is needed to access the user feedback at any time
export const FeedbackContext = React.createContext(() => { });


export default  class App extends React.Component<AppProps, FeedBackMessages> {
 constructor(props, context) {
    super(props, context);
    this.state = {
      listItems: []
    };
  }


  render() {
    const { title, isOfficeInitialized } = this.props;
    if (!isOfficeInitialized) {
      return (
        <Progress title={title} logo="assets/Boxes32x32.png" message="Please sideload your addin to see app body." />
      );
    }
    
    return (
      <Router>
     
        <h2> Profile generator</h2>
       <nav>
        <ul>
        <Link to='/Properties'><li>Properties</li></Link>
        <Link to='/Translations'><li>Translations</li></Link>
        </ul>

      </nav>
      <div>
      <Switch>
         <Route path="/properties/" component={Properties} /> 
         <Route path="/translations/" component={Translations} /> 
      </Switch>
      </div>
       </Router>
    );
  }
}

这是一个使用 React 路由器的非常基本的导航示例。如果我在带有 TypeScript 的 CRA 样板中使用此代码，它可以在 Google Chrome 或 Firefox 上运行，但如果我敢于将它与 Excel 一起使用并侧载 Excel 中的插件和我单击属性 link 或翻译 link，它重定向到一个空白页面。返回主页的唯一方法是重新加载应用程序。我不知道去哪里看，因为没有错误，调试也不起作用。我找到了 this post 但它并没有解决我的问题。非常感谢。

9 月 14 日更新

我仍然看到白页，但 F12 开发人员工具可以正常工作，并且我收到以下错误反馈：

0: Unable to get property 'createElement' of undefined or null reference Properties.tsx (5,22)

The above error occurred in the component: in Properties (created by Context.Consumer) in Route (created by App)

in Switch (created by App)
in div (created by StackItem)
in StackItem (created by App)
in Router (created by HashRouter)
in HashRouter (created by App)
in div (created by Stack)
in Stack (created by App)
in App
in AppContainer`
React will try to recreate this component tree from scratch using the error boundary you provided, AppContainer.

所以看起来我的属性组件有问题但组件看起来像这样：

import React, {useContext} from "react";
import { FeedbackContext }from "../FeedbackContext";
import { Button, ButtonType } from "office-ui-fabric-react";

const Properties=()=>{

return(
    <>
        <h3>Properties setting</h3>

  </>
    )
}

 export default Properties;

这意味着我只放置了一个 H3 标签来显示一些文本（我删除了所有其他内容）。会出什么问题？

非常感谢

Answer 1

我发现了导致此错误的问题！我像个白痴一样搜索了很多周，但在 Yeoman 生成器的脚手架中的某个地方，Microsoft 在不接受以下方面做得很糟糕：

import React from "react";

在路由组件页面导入语句。

如果您将其更改为旧版本（基于 React Class 的组件标准）

import * as React from "react";

在 properties 组件之上，然后神奇地，React (Hash) 路由器起作用了！

所以我认为微软是时候更新 Yeoman Scaffolding 以支持现代 React 语法并最终使用功能组件 App.tsx!

Office JS excel 中的 React Router 导致白页

React Router in office JS excel causes white page

typescript

reactjs

office-js

office-js-ux