使用react-router-dom出现TypeError: Object(...) is not a function错误求助

这个错误大概率是react-router-dom版本与React版本不兼容，或是v6版本下使用了v5的写法导致的，下面给你具体排查和解决步骤：

1. 检查版本兼容性 #

打开你的package.json，查看以下依赖的版本：

• 如果你的react-router-dom是v6.x版本，必须确保react和react-dom的版本≥16.8.0（因为v6大量使用了React Hooks，低版本React不支持）。
• 如果你的React版本低于16.8，需要把react-router-dom降级到v5.x（推荐v5.3.0），执行命令：

  npm uninstall react-router-dom
  npm install react-router-dom@5.3.0
  

2. 修正组件写法（对应不同版本） #

如果你用的是v5.x版本 #

Route组件需要至少指定path和component/render属性，空的Route会导致异常，修改代码如下：

import React from 'react';
import { HashRouter, Route } from 'react-router-dom'; 
import './App.css';
import Home from './routes/Home'
import About from './routes/About'

function App(){
    return (
        <HashRouter>
            <Route path="/" component={Home} exact />
            <Route path="/about" component={About} />
        </HashRouter>
    )
}

export default App;

如果你用的是v6.x版本 #

v6彻底改变了Route的用法：必须用Routes组件包裹所有Route，且Route需要通过element属性传入要渲染的组件，修改代码如下：

import React from 'react';
import { HashRouter, Routes, Route } from 'react-router-dom'; 
import './App.css';
import Home from './routes/Home'
import About from './routes/About'

function App(){
    return (
        <HashRouter>
            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/about" element={<About />} />
            </Routes>
        </HashRouter>
    )
}

export default App;

3. 重置依赖（可选） #

如果以上步骤都无效，可能是依赖安装出现损坏，执行以下操作：

• 删除项目根目录下的node_modules文件夹和package-lock.json文件
• 重新执行npm install

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