路由似乎在基于 React 的插件中不起作用

Question

我使用 Yeoman 生成器创建了一个全新的 Excel 插件，并且我选择了 React 任务窗格选项。

我正在尝试构建一个扩展程序，该扩展程序将为插件的不同功能提供多个页面，因此我安装了 reach router 并编写了一些基本路由，就像我对常规 React 应用程序所做的那样。但是，每当尝试访问路由时，我都会在 Excel 的插件窗格中显示此 Cannot GET /insert 错误。

这是我在 App.js 文件中的代码：

return (
      <div>
        <nav>
          <Link to="/">Login</Link> | <Link to="insert">Insert</Link> | <Link to="update"> Update</Link> |{" "}
          <Link to="remove">Remove</Link>
        </nav>
        <Router>
          <Login path="/" />
          <Insert path="insert" />
          <Remove path="remove" />
          <Update path="update" />
        </Router>
        <Button
          className="ms-welcome__action"
          buttonType={ButtonType.hero}
          iconProps={{ iconName: "ChevronRight" }}
          onClick={this.click}
        >
          Run
        </Button>
      </div>
    );

我只包含了 return 语句，因为其他所有内容几乎都是我使用 Yeoman Generator 获得的默认起始代码。这个问题可能与 Excel Addins 没有直接联系，而是与 React 的路由有关。我只在我的项目中使用 reach router 来进行不太复杂的路由，但我的代码似乎是有效的，所以我想知道这是否不是 manifest.xml 文件的问题，但我不确定。

知道问题出在哪里吗？

感谢您的宝贵时间。

Answer 1

我设法解决了我自己的问题，所以我将我的解决方案发布在这里供可能遇到此问题的人使用。

我不确定为什么，但基本上到达路由器不适用于 Excel 插件。我个人没有找到任何可以使其工作的配置。这可能与在侧窗格中运行您的添加的浏览器有关，该浏览器可能是旧的或以某种方式不兼容。

所以，无论如何，我找到的解决方案是将 reach-router 替换为 react-router-dom 并使用 HashRouter 组件而不是通常的 Router。如果你只是做基本的路由，使用 HashRouter over Router 不应该要求你修改你的代码。不过，您不能只使用常规 Router 组件，不幸的是它不起作用。

希望对您有所帮助。

路由似乎在基于 React 的插件中不起作用

Routing doesn't seem to work in React based Addins

excel

reactjs

react-router

office-js

reach-router