错误：[代理外观] 不是<Route>组件。的所有组件子级<Routes>必须是 或 <Route> <React.Fragment>

Question

我正在使用"react router dom"："6.0.2〃；在React 17中。我用的是打字稿。我试图添加路线。但是得到错误

未捕获错误：[ProxyFacade]不是组件。的所有组件子级必须是一个或<反应片段>

我不知道问题出在哪里。我错过了什么吗。

应用程序.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;

注册/索引.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热加载程序有关。热加载程序用代理封装所有内容[因此错误中的[ProxyFacade]]。React路由器代码可能会查看函数(组件(的类型，以验证Routes是否有除Route组件之外的任何子级。请参阅此处的问题。

你可以先在没有热重新加载程序的情况下尝试，看看你是否仍然面临这个问题。如果你不这样做，那么你可以修复我在上面添加的链接中提到的react热加载程序问题。