安装MaterialUI后Microsoft Teams标签应用路由失效问题

问题背景 #

我正在开发Microsoft Teams的标签应用，计划使用MaterialUI作为组件库，但安装MaterialUI后，Teams Toolkit生成的原有路由功能完全失效。

修改后的App.tsx代码（仅删除了不需要的路由） #

import React from "react";
// https://fluentsite.z22.web.core.windows.net/quick-start
import { Provider, teamsTheme } from "@fluentui/react-northstar";
import { BrowserRouter as Router, Redirect, Route } from "react-router-dom";
import Tab from "./Tab";
import "./App.css";
import { useTeams } from "@microsoft/teamsfx-react";

/**
 * The main app which handles the initialization and routing
 * of the app.
 */
export default function App() {
  const { theme } = useTeams({})[0];
  return (
    <Provider theme={theme || teamsTheme} styles={{ backgroundColor: "#eeeeee" }}>
      <Router>
        <Route exact path="/">
          <Redirect to="/tab" />
        </Route>
        <>
          <Route exact path="/tab" component={Tab} />
        </>
      </Router>
    </Provider>
  );
}

错误信息 #

'Router' cannot be used as a JSX component.
Its instance type 'BrowserRouter' is not a valid JSX element.
The types returned by 'render()' are incompatible between these types.
Type 'React.ReactNode' is not assignable to type 'import("XXX/node_modules/@types/react/index").ReactNode'.
Type '{}' is not assignable to type 'ReactNode'.ts(2786)

Router、Redirect和Route组件均触发上述相同错误。

已尝试的排查动作 #

• 将BrowserRouter替换为MemoryRouter/HashRouter，问题依旧
• 执行npm update并安装@types/react-router-dom
• 分别尝试安装react@18.2.0（react-router-dom指定兼容版本）和react@18.0.0（MaterialUI指定兼容版本）

当前package.json内容 #

{
  "name": "XXX",
  "version": "0.0.1",
  "description": "",
  "author": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "@microsoft/teamsfx-cli": "1.*"
  },
  "license": "MIT",
  "dependencies": {
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@mui/icons-material": "^5.11.0",
    "@mui/material": "^5.11.7",
    "@types/react-router-dom": "^5.3.3",
    "react-router-dom": "^6.8.1"
  }
}

解决方案 #

核心问题 #

1. 依赖版本不匹配：安装的react-router-dom是v6.8.1，但@types/react-router-dom却是v5.3.3，类型定义与实际库版本冲突
2. API写法过时：代码仍使用React Router v5的语法，而v6已彻底重构路由API

解决步骤 #

1. 清理错误的类型依赖
   React Router v6自带类型定义，无需单独安装@types/react-router-dom，执行卸载：

   npm uninstall @types/react-router-dom
   

2. 适配React Router v6的API写法
   v6移除了Redirect、component属性，改用Navigate和element，且所有路由必须包裹在Routes组件中，修改后的App.tsx如下：

   import React from "react";
   import { Provider, teamsTheme } from "@fluentui/react-northstar";
   import { BrowserRouter as Router, Routes, Route, Navigate } from "react-router-dom";
   import Tab from "./Tab";
   import "./App.css";
   import { useTeams } from "@microsoft/teamsfx-react";
   
   export default function App() {
     const { theme } = useTeams({})[0];
     return (
       <Provider theme={theme || teamsTheme} styles={{ backgroundColor: "#eeeeee" }}>
         <Router>
           <Routes>
             <Route path="/" element={<Navigate to="/tab" />} />
             <Route path="/tab" element={<Tab />} />
           </Routes>
         </Router>
       </Provider>
     );
   }
   

3. 统一React版本
   确保React和React DOM版本符合react-router-dom v6要求（16.8+，推荐18.x），若项目未显式安装，执行：

   npm install react@^18.2.0 react-dom@^18.2.0
   

4. 重置依赖缓存

   rm -rf node_modules package-lock.json
   npm install
   

执行以上步骤后，路由组件的类型错误和功能失效问题即可解决。

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