Office JS Excel中的React Router导致白页

问题描述

我正在尝试使用TypeScript和React开发Excel的插件，但是成功的道路并不那么繁琐，因为Office插件的行为与CRA React样板Web应用程序不同。我为任务窗格插件创建了一个Yo Office打字稿React项目，在App.tsx中，我有以下JSX返回值：

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中加载该插件，然后单击“属性”链接或翻译链接，它将重定向到空白页。返回主页的唯一方法是重新加载应用程序。我不知道在哪里看，因为没有错误并且调试也无法正常工作。我找到了this个帖子，但没有解决我的问题。预先非常感谢。

9月14日更新

我仍然得到白页，但是我使用了F12开发人员工具，并且收到以下错误反馈：

0：无法获取未定义或空引用的属性“ createElement” Properties.tsx（5,22）

上述错误发生在组件中： 在Route（由App创建）的Properties（由Context.Consumer创建）中

---

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会尝试使用您提供的错误边界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标签来显示一些文本（我删除了所有其他内容）。怎么可能出问题了？

非常感谢

解决方法

我发现了导致此错误的问题！我像白痴一样搜索了好几个星期，但是在Yeoman发电机支架中的某个地方，Microsoft在不接受以下方面做得很糟糕：

import React from "react";

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

如果将其更改为较早的版本（基于反应类的组件标准）

import * as React from "react";

在属性组件的顶部，然后神奇地运行React（Hash）路由器！

因此，我认为微软真的应该更新Yeoman Scaffolding，以支持现代React语法，并最终为App.tsx使用功能组件！