反应-错误:App(...):渲染未返回任何内容。这通常意味着缺少return语句。或者,不渲染任何内容,则返回null

时间:2020-10-27 02:17:48

标签: javascript reactjs react-redux react-apollo apollo-client

我正在使用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();

App.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。'

有人可以帮助解决此问题吗? 编辑:堆栈跟踪- enter image description here

1 个答案:

答案 0 :(得分:2)

编辑:问题似乎一直存在于您的0 < c < 1中。您不会返回应用的JSX。将其添加到:

O(n^c_crit) = O(n^1) = O(n)

原始答案:

您需要实际在App.js中渲染元素,即

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>
  );
}

也在您的apollo提供程序中,返回一个功能组件,而不是纯JSX。不知道这是否有关系,但可能会有所帮助,即

ReactDOM.render