错误：[ProxyFacade] 不是 <Route> 组件。<Routes> 的所有子组件都必须是 <Route> 或 <React.Fragment>

Question

我在 React 17 中使用 "react-router-dom": "6.0.2" 。我正在使用打字稿。我试图添加路线。但出现错误

未捕获的错误：[ProxyFacade] 不是组件。的所有子组件必须是 a 或 <React.Fragment>

我不知道出了什么问题。有什么我错过的吗？

应用程序.tsx

import * as React from "react";
import "./index.less";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import { hot } from "react-hot-loader";
import SignIn from "../sign-in";
import SignUp from "../sign-up";

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<SignIn />} />
        <Route path="/signup" element={<SignUp />} />
      </Routes>
    </BrowserRouter>
  );
};
declare let module: Record<string, unknown>;

export default hot(module)(App);

登录/index.tsx

import * as React from "react";
const SignIn = () => {
  return (
    <React.Fragment>
      <div>
        <p>Sign In</p>
      </div>
    </React.Fragment>
  );
};

export default SignIn;

注册/index.tsx

import * as React from "react";
const SignUp = () => {
  return (
    <React.Fragment>
      <div>
        <p>Sign In</p>
      </div>
    </React.Fragment>
  );
};

export default SignUp;

Answer 1

可能和React Hot Loader有关系。热加载器用代理包装所有内容[因此[ProxyFacade]出现错误]。React 路由器代码可能会查看函数（组件）的类型，以验证该函数是否Routes有除组件之外的任何子Route组件。请参阅此处的问题。

您可以先尝试不使用热重新加载器，看看是否仍然遇到问题。如果不这样做，那么您可以修复反应热加载器问题，如我上面添加的链接中所述。