React Router Dom渲染内部组件触发useSubmitImpl错误的解决咨询

错误原因 #

你使用的是React Router v6.4+推出的Form组件，这个组件属于**数据路由（Data Router）**体系的API，而当前配置的BrowserRouter是传统客户端路由，不提供数据路由所需的上下文环境，导致Form组件内部依赖的useSubmit钩子无法找到有效上下文，从而抛出错误。

解决方案 #

方案1：切换到数据路由（推荐） #

React Router v6.4+主推数据路由模式，需将BrowserRouter替换为createBrowserRouter和RouterProvider配置路由：

原BrowserRouter写法：

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import CreateIssueTool from './CreateIssueTool';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/createissue" element={<CreateIssueTool />} />
      </Routes>
    </BrowserRouter>
  );
}

修改为数据路由写法：

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import CreateIssueTool from './CreateIssueTool';

// 定义路由配置
const router = createBrowserRouter([
  {
    path: '/createissue',
    element: <CreateIssueTool />,
  },
  // 可添加其他路由
]);

function App() {
  return <RouterProvider router={router} />;
}

修改后，CreateIssueTool内的Form组件就能正常获取数据路由上下文，不再报错。

方案2：改用普通表单（不更换路由模式） #

如果不想切换路由模式，可以放弃React Router的Form组件，使用原生HTML表单并手动处理提交逻辑：

// CreateIssueTool组件内部
function CreateIssueTool() {
  const handleSubmit = (e) => {
    e.preventDefault();
    // 收集表单数据
    const formData = new FormData(e.target);
    const issueData = Object.fromEntries(formData);
    
    // 添加自定义提交逻辑，比如发送API请求
    console.log('提交的数据:', issueData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>标题：</label>
        <input type="text" name="title" required />
      </div>
      <div>
        <label>描述：</label>
        <textarea name="description" rows={5} required></textarea>
      </div>
      <button type="submit">创建Issue</button>
    </form>
  );
}

补充说明 #

内部Form组件影响路由流程的原因是：React Router的Form并非普通表单封装，它依赖数据路由提供的提交、导航上下文，只能在RouterProvider（而非BrowserRouter）包裹的组件树中使用。脱离该上下文后，组件内部的useSubmit钩子无法初始化，进而触发错误。

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