react-router-dom v6.2.2 TypeError中的错误：Object（...）不是函数答案

【问题标题】：Error in react-router-dom v6.2.2 TypeError: Object(...) is not a functionreact-router-dom v6.2.2 TypeError中的错误：Object（...）不是函数
【发布时间】：2022-06-29 02:35:12
【问题描述】：

我正在使用 react-router-dom v6，我编写了正确的语法，但每次我都收到此错误。这是我完整的 App.js 代码。我收到此错误“react-router-dom v6.2.2 TypeError 中的错误：Object(...) is not a function”...

import $ from "jquery";
import React, { Component, createRef } from "react";
import "./styles.css";
import { Route, Routes, Link } from "react-router-dom";
import RenderForm from "./RenderForm";

window.jQuery = $;
window.$ = $;

require("jquery-ui-sortable");
require("formBuilder");

const formData = [];

export default class FormBuilder extends Component {
  fb = createRef();
  formBuilder = null;
  saveFile = () => {
    console.log(this.formBuilder.actions.getData());
  };

  componentDidMount() {
    this.formBuilder = $(this.fb.current).formBuilder({ formData });
  }
  render() {
    return (
      <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>
    );
  }
}

RenderForm.js “react-router-dom v6.2.2 TypeError 中的错误：Object(...) 不是函数”...

import $ from "jquery";
import React, { createRef, Component } from "react";
import "./styles.css";

window.jQuery = $;
window.$ = $;

require("jquery-ui-sortable");
require("formBuilder");
require("formBuilder/dist/form-render.min.js");

const formData = [
  {
    type: "button",
    label: "Button",
    subtype: "button",
    className: "btn-default btn",
    name: "button-1647601287143-0",
    access: false,
    style: "default",
  },
  {
    type: "checkbox-group",
    required: false,
    label: "Checkbox Group",
    toggle: false,
    inline: false,
    name: "checkbox-group-1647601288538-0",
    access: false,
    other: false,
    values: [
      {
        label: "Option 1",
        value: "option-1",
        selected: true,
      },
    ],
  },
];

export default class RenderForm extends Component {
  fb = createRef();

  formRenderOpts = {
    formData,
    dataType: "json",
  };
  fields = [
    {
      label: "Email",
      type: "text",
      subtype: "email",
      icon: "✉",
    },
  ];

  componentDidMount() {
    this.formRender = $(this.fb.current).formRender(this.formRenderOpts);
    console.log(this.formRender.options.formData);
  }

  render() {
    return (
      <div>
        <div id="fb-rendered-form" ref={this.fb} />
      </div>
    );
  }
}

【问题讨论】：

您能否正确分享错误消息以及您在哪里使用它？
我收到一条很长的消息。初始部分共享 TypeError: Object(...) is not a function useInRouterContext C:/Users/LENOVO/Desktop/React/myproject/node_modules/react-router/index.js:289 286 | /287 | 288 |函数 useInRouterContext() { > 289 |返回 useContext(LocationContext) != null; 290 | 291 | /* 292 | * 返回当前位置对象，代表当前web中的URL
尝试用 BrowserRouter 包装 index.js 并将路由保留在 app.js 上
我不确定，必须检查你的代码，如果可能的话分享你的代码
能分享一下“./RenderForm”的代码吗？

标签： reactjs

【解决方案1】：

不是解决方案，顺便说一句，你找到了吗，因为我面临同样的问题

【讨论】：