使用Browser Router配置路由触发TS2769错误，求解决方案

错误原因 #

你代码里的Route组件导入错了——当前是从@mui/icons-material导入的，这是MUI的图标组件，根本不是React Router用来定义路由的Route。TypeScript报错是因为你把路由专属的path、element等props传给了图标组件，两者类型完全不兼容。

解决步骤 #

1. 删除错误导入：删掉从@mui/icons-material导入的Route和Router（你代码里没用到Router图标，直接移除这行即可）
2. 导入正确的Route组件：从react-router-dom中导入Route

修改后的完整代码 #

import './index.css';
// 移除错误的图标组件导入
import {createTheme, ThemeProvider} from '@mui/material';

import App from './App';
import {StrictMode} from 'react';
import {lightTheme} from '@gds/react-mui';
import DocumentUIStartingPage from './pages/DocumentUI/StartingPage/DocumentUIStartingPage';
import reportWebVitals from './reportWebVitals';
import {createRoot} from 'react-dom/client';
// 从react-router-dom导入正确的路由组件
import {BrowserRouter, Routes, Route} from 'react-router-dom';

const theme = createTheme(lightTheme);
const container = document.getElementById('root');
const root = createRoot(container!);

root.render(
  <StrictMode>
    <ThemeProvider theme={theme}>
      <BrowserRouter>
        <Routes>
          {/* React Router v6 无需exact属性，默认精确匹配 */}
          <Route path="/" element={<App/>} />
          <Route path="/documentUI" element={<DocumentUIStartingPage/>} />
        </Routes>
      </BrowserRouter>
    </ThemeProvider>
  </StrictMode>
);

reportWebVitals();

额外提示 #

React Router v6版本中，<Routes>组件下的<Route>默认就是精确匹配，所以不需要再添加exact属性，直接删除即可。

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