react-router-dom报错：No overload matches this call 原因及解决方法

错误含义 #

这个错误源于你使用的是react-router-dom v6+版本，但代码仍沿用v5的旧语法。v6对路由组件的结构和属性做了破坏性调整：

• BrowserRouter（即你别名的Router）的子元素不能直接放置Route组件，必须用Routes组件统一包裹所有路由规则
• Route组件不再支持component属性，需改用element属性传入组件实例
• exact属性被移除，v6的路由匹配默认就是精准匹配逻辑

解决方法 #

将代码修改为v6的标准语法即可：

import { BrowserRouter as Router, Routes, Route} from "react-router-dom";

return(
    <LoadingContextProvider>
         <Router>
            <Routes>
                <Route path="/sign-in" element={<SignIn />} />
                <Route path="/sign-up" element={<SignUp />} />
                <Route path="/" element={<ProductsYouMayLike />} />
            </Routes>
         </Router>
    </LoadingContextProvider>
)

核心修改点 #

• 新增导入Routes组件
• 用Routes组件包裹所有Route
• 将component={ComponentName}替换为element={<ComponentName />}
• 删除所有exact属性

如果必须保留v5语法，可降级react-router-dom到v5版本：

npm install react-router-dom@5
# 或
yarn add react-router-dom@5

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