javascript - React - 错误:App(...):渲染没有返回任何内容。这通常意味着缺少 return 语句。或者,不渲染任何内容,返回 null
问题描述
我正在使用 MERN 和 GraphQL Apollo 创建一个完整的堆栈应用程序。为了将后端连接到客户端,我使用的是 Apollo Client。这是代码 -
ApolloProvider.js
import React from "react";
import App from "./App";
import {
ApolloClient,
createHttpLink,
InMemoryCache,
ApolloProvider,
} from "@apollo/client";
const httpLink = createHttpLink({ uri: "http://localhost:5000" });
const client = new ApolloClient({
link: httpLink,
cache: new InMemoryCache(),
});
export default (
<ApolloProvider client={client}>
<App />
</ApolloProvider>
);
index.js
import ReactDOM from "react-dom";
import reportWebVitals from "./reportWebVitals";
import ApolloProvider from "./ApolloProvider";
ReactDOM.render(ApolloProvider, document.getElementById("root"));
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint.
reportWebVitals();
应用程序.js
import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import { Container } from "semantic-ui-react";
import "semantic-ui-css/semantic.min.css";
import "./App.css";
import MenuBar from "./components/MenuBar";
import Home from "./pages/Home";
import Login from "./pages/Login";
import Register from "./pages/Register";
function App() {
<Router>
<Container>
<MenuBar />
<Route exact path="/" component={Home} />
<Route exact path="/login" component={Login} />
<Route exact path="/register" component={Register} />
</Container>
</Router>;
}
export default App;
出现错误时ReactDOM.render(ApolloProvider, document.getElementById("root"));
- '没有从渲染返回。这通常意味着缺少 return 语句。或者,不渲染任何内容,返回 null。
解决方案
编辑:看起来问题一直在你身上App.js
。您不会返回应用程序的 JSX。将其添加到:
function App() {
return (
<Router>
<Container>
<MenuBar />
<Route exact path="/" component={Home} />
<Route exact path="/login" component={Login} />
<Route exact path="/register" component={Register} />
</Container>
</Router>
);
}
原答案:
您需要实际渲染元素ReactDOM.render
,即
ReactDOM.render(<ApolloProvider/>, document.getElementById("root"));
同样在您的 apollo 提供程序中,返回一个功能组件,而不是纯 JSX。不确定这是否重要,但可能会有所帮助,即
const ApolloApp = () => (
<ApolloProvider client={client}>
<App />
</ApolloProvider>
);
export default ApolloApp;
推荐阅读
- clojure - 如何使用 Cursive 和 Figwheel 设置 ClojureScript 环境?
- r - 在 lapply R 中添加序列
- amazon-s3 - “如何在 Ansible 中‘计算子文件夹中的 AWS S3 文件’”
- c# - 未知 NuGet 错误 无法检索信息
- c++ - 如何在 Visual Studio 2017 中重新启用格式化
- sql - Oracle - 确定以前的记录是否存在
- python - 'pd.read_csv' 将我的 csv 文件中的列读取为 . .
- maven - 无响应的 JMS 队列
- python - 在 Pandas 中分组或不分组的条件
- android - adb logcat 未附加到 nativescript 应用程序上的设备