react-router-dom v6.2.2 报错：TypeError: Object(...) is not a function 求助

嘿，我帮你找到了这个错误的核心原因，以及对应的解决办法：

错误根源 #

在React Router v6版本中，所有使用<Routes>、<Route>、<Link>这类路由相关组件的代码，必须被一个路由提供者组件（比如<BrowserRouter>）包裹。这些组件依赖Router提供的上下文来工作，如果没有这个包裹，就会抛出你遇到的TypeError: Object(...) is not a function错误。

看你的代码，App.js直接返回了包含<Link>和<Routes>的组件，但没有用任何Router组件包裹，这就是问题所在。

具体解决步骤 #

步骤1：导入BrowserRouter #

在你的入口文件（比如index.js）或者App.js中，从react-router-dom导入BrowserRouter：

import { BrowserRouter } from "react-router-dom";

步骤2：用BrowserRouter包裹路由相关组件 #

如果是在index.js中修改，修改后的代码大概是这样：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

如果你想在App.js中直接修改，也可以这样写：

// App.js中更新导入语句
import { Route, Routes, Link, BrowserRouter } from "react-router-dom";

// 修改render方法
render() {
  return (
    <BrowserRouter>
      <div>
        <div id="fb-editor" ref={this.fb} />
        <Link to="/formdata">form structure</Link>
        <button onClick={this.saveFile}>save</button>
        <Routes>
          <Route path="/formdata" element={<RenderForm />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

额外优化建议 #

注意到你写的<Link to="formdata">，这里用的是相对路径，建议改成绝对路径<Link to="/formdata">，这样无论当前处于哪个路径，都能正确跳转到目标路由，避免出现路径错误的问题。

验证修改 #

完成上述修改后，重新启动你的应用，应该就能解决这个类型错误，路由功能也能正常工作了。

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