在React+TypeScript中使用BrowserRouter、Routes和Link时遇报错求助

你在TypeScript版Create React App中使用react-router-dom v6代码出现报错，可按以下步骤排查解决：

1. 校正依赖版本 #

你的代码使用的是react-router-dom v6的语法（Routes组件、Route的element属性），确保安装的是正确版本，且无需额外安装@types/react-router-dom（v6自带类型定义）：

npm uninstall react-router-dom @types/react-router-dom
npm install react-router-dom

2. 检查页面组件的导出与导入 #

确保Search.page.tsx、Home.page.tsx、Profile.page.tsx都是默认导出：

// 示例：Home.page.tsx
const HomePage = () => {
  return <div>Home Page</div>;
};
export default HomePage;

如果组件是命名导出，需同步修改导入语句为import { HomePage } from './pages/Home.page';

3. 确认TypeScript配置 #

检查tsconfig.json中的jsx配置是否正确（Create React App模板默认已设置，但需确保未被修改）：

{
  "compilerOptions": {
    "jsx": "react-jsx"
  }
}

4. 清除缓存重启服务 #

缓存可能导致类型检测异常，执行以下命令重置缓存并重启：

npm start -- --reset-cache

5. 排查页面组件内部错误 #

检查三个页面组件是否存在语法错误、类型定义问题（比如未声明的变量、不符合TS规范的代码），这些问题会传导到App组件引发报错。

你的代码示例：

import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import SearchPage from './pages/Search.page';
import HomePage from './pages/Home.page';
import ProfilePage from './pages/Profile.page';
import './App.css';

function App() {
    return (
       <Router>
          <div>
            <nav>
              <ul>
               <li>
                 <Link to='/profile'>Profile</Link>
               </li>
                <li className='right-edge-pusher'>
                  <Link to='/'>Home</Link>
                 </li>
                 <li>
                    <Link to='/search'>Search</Link>
                 </li>
              </ul>
            </nav>
            <Routes>
              <Route path='/profile' element={<ProfilePage/>}/>
              <Route path='/' element={<HomePage/>}/>
              <Route path='/search' element={<SearchPage/>}/>
            </Routes>
          </div>
      </Router>
     );
}

export default App;

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