“路由器”/“全局样式”不能用作JSX组件
“路由器”/“全局样式”不能用作JSX组件
提问于 2022-04-19 21:38:02
我在我的React应用程序中遇到了这个问题：
'Router' cannot be used as a JSX component.
Its instance type 'Router' is not a valid JSX element.
The types returned by 'render()' are incompatible between these types.它也发生在我创建的全局样式组件上
'GlobalStyles' cannot be used as a JSX component.
Its instance type 'Component<ThemedGlobalStyledClassProps<{}>这是我的App.tsx文件：
import {BrowserRouter, Router} from 'react-router-dom';
import { Slide, ToastContainer } from "react-toastify";
import Routes from "./routes";
import GlobalStyles from "./styles/global";
import Header from "./components/Header";
import Aside from "./components/Aside";
import { CartProvider } from "./hooks/useCart";
import history from "./history";
import { AuthProvider } from "./Context/AuthContext";
const App = (): JSX.Element => {
return (
<>
<Aside />
<AuthProvider>
<Router history={history}>
<CartProvider>
<GlobalStyles />
<Header />
<Routes />
<ToastContainer autoClose={3000} transition={Slide} />
</CartProvider>
</Router>
</AuthProvider>
</>
);
};
export default App;我正在使用React的18版本，到目前为止我已经尝试过了：
install
- Reverting 17~
- Reinstalling版本
- 删除node_modules并运行node_modules反应路由器
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-04-19 21:54:21
首先，您必须将BrowserRouter作为路由器导入，如下所示：
import { BrowserRouter as Router, } from "react-router-dom";GlobalStyles可能不是一个组件。
这里有两种在React中创建组件的方法。
1)功能组件必须如下所示：
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}(2)类别组件：
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}Stack Overflow用户
发布于 2022-05-31 14:38:23
您的styled-components可能正在使用旧版本的@types/react。您可以通过检查node_modules/types/styled-components中react类型的版本来确认。
对我来说，添加yarn resolutions有助于解决问题(如果您也在使用yarn )。
尝试将其添加到package.json文件中。
"resolutions": {
"@types/react": "^18.0.0"
}不幸的是，它会(可能？？)如果您使用的是npm，则不会工作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71931642
复制相关文章
相似问题
腾讯云开发者
