React开发Office Outlook插件时Redirect在WebView中触发SCRIPT16389未指定错误的解决方案咨询

这个错误本质上是因为Outlook插件的任务窗格运行在受限的WebView环境中（部分版本依赖IE兼容模式），而BrowserRouter依赖的HTML5 History API（pushState/replaceState）在这个环境中被Office.js拦截或存在兼容性问题——即使你尝试备份恢复history方法，也无法完全规避底层的限制。

下面提供两种可行的解决思路：

方案一：改用HashRouter替代BrowserRouter #

HashRouter不依赖浏览器的History API，而是通过URL的哈希片段（#后面的部分）来管理路由状态，完全适配Office插件的受限环境。

修改你的App.js代码：

// 替换导入的Router组件
import { HashRouter, Route, Switch, Redirect } from "react-router-dom";

// 在render方法中替换BrowserRouter为HashRouter
render() {
    const { title, isOfficeInitialized } = this.props;
    if (!isOfficeInitialized) {
        return (
            <Progress title={title} logo="assets/logo-filled.png" message="Please sideload your addin to see app body." />
        );
    }
    return (
        <div className="ms-welcome">
            <Header logo="assets/logo-filled.png" title={this.props.title} message="Welcome" />
            <HeroList message="Discover what Office Add-ins can do for you today!" items={this.state.listItems}>
                <p className="ms-font-l">
                    Modify the source files, then click <b>Run</b>.
                </p>
                <Button
                    className="ms-welcome__action"
                    buttonType={ButtonType.hero}
                    iconProps={{ iconName: "ChevronRight" }}
                    onClick={this.click.bind(this)}
                >
                    Run
                </Button>
            </HeroList>
            <HashRouter> {/* 这里替换为HashRouter */}
                <Switch>
                    <Route path="/login">
                        <BodyList />
                    </Route>
                </Switch>
                {this.switchComponent()}
            </HashRouter>
        </div>
    );
}

同时可以移除Taskpane.html中关于备份history方法的代码，因为HashRouter不需要依赖这些API，避免不必要的冲突：

<!-- 移除这两段代码 -->
<script>
    window.backupHistoryFunctions = {};
    window.backupHistoryFunctions.pushState = window.history.pushState;
    window.backupHistoryFunctions.replaceState = window.history.replaceState;
</script>
<script>
    window.history.pushState = window.backupHistoryFunctions.pushState;
    window.history.replaceState = window.backupHistoryFunctions.replaceState;
    console.log(window.history.replaceState)
</script>

方案二：不使用React Router，用状态管理切换组件 #

如果你的插件路由逻辑不复杂，完全可以通过组件内部状态来控制视图切换，这种方式更轻量，也完全避免路由相关的兼容性问题。

修改App.js的实现：

export default class App extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.state = {
            listItems: [],
            currentView: 'welcome', // 用状态标记当前视图
        };
    }

    componentDidMount() {
        this.setState({
            listItems: [
                { icon: "Ribbon", primaryText: "Achieve more with Office integration" },
                { icon: "Unlock", primaryText: "Unlock features and functionality" },
                { icon: "Design", primaryText: "Create and visualize like a pro" },
            ],
        });
    }

    click = async () => {
        this.setState({ currentView: 'login' }); // 切换视图状态
        console.log("redirect");
    };

    render() {
        const { title, isOfficeInitialized } = this.props;
        const { currentView } = this.state;
        
        if (!isOfficeInitialized) {
            return (
                <Progress title={title} logo="assets/logo-filled.png" message="Please sideload your addin to see app body." />
            );
        }

        // 根据currentView渲染对应组件
        if (currentView === 'login') {
            return <BodyList />;
        }

        return (
            <div className="ms-welcome">
                <Header logo="assets/logo-filled.png" title={this.props.title} message="Welcome" />
                <HeroList message="Discover what Office Add-ins can do for you today!" items={this.state.listItems}>
                    <p className="ms-font-l">
                        Modify the source files, then click <b>Run</b>.
                    </p>
                    <Button
                        className="ms-welcome__action"
                        buttonType={ButtonType.hero}
                        iconProps={{ iconName: "ChevronRight" }}
                        onClick={this.click}
                    >
                        Run
                    </Button>
                </HeroList>
            </div>
        );
    }
}

为什么会出现这个错误？ #

Outlook插件的任务窗格运行在Office提供的嵌入式WebView中，为了安全和兼容性，Office.js会修改或限制部分浏览器原生API的行为，其中就包括History API。BrowserRouter在调用pushState/replaceState时会触发环境的限制，导致抛出SCRIPT16389这个未指定错误（本质是IE/Edge兼容模式下的API调用失败）。

内容的提问来源于stack exchange，提问作者grzhzhptuqhj