索引文件的React，Render问题

Question

在我的react项目中，当我启动它时，出现了一个错误，没有从render返回任何东西，它有一个问题，我的index.js有问题，你们看到代码有什么问题了吗？

import React from 'react';
import ReactDOM from 'react-dom';
import './App.css';
import App from './App';


ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

下面是它抛出的错误ERROR IMAGE!

如有任何帮助，谢谢！

App.js文件(供参考)这里是app.js文件的代码，以防需要，谢谢！

import React, { useState, useEffect } from "react";
import "./App.css";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Redirect,
} from "react-router-dom";
import "./App.css";
import { BrowserRouter } from "react-router-dom";
import { Nav } from "./components/Navbar";
import Home from "./components/pages/Home";
import Footer from "./components/Footer";
//Shop
import ProductPage from "./components/pages/ProductPage";
import Products from "./components/pages/Products";
import ShopProvider from "./context/shopContext";
import Cart from "./components/Cart";

//Shop
import { Provider as StyletronProvider, DebugEngine } from "styletron-react";
import { Client as Styletron } from "styletron-engine-atomic";

//SignUp
import SignUp from "./components/SignUp";
import Login from "./components/Login";

import { AuthProvider } from "./context/AuthContext";
import { Container } from "react-bootstrap";

import fire from "./config/fire";
import HeroSection from "./components/HeroSection";

import { Navbar } from "react-bootstrap";

//Debug const (for shop)
const debug =
  process.env.NODE_ENV === "production" ? void 0 : new DebugEngine();

//Engine
const engine = new Styletron();

//////////////////////////////////////////////////////////////
const App = () => {

  ///////////////////////////////////////////////////////////////




  function App() {
    return (
      <ShopProvider>
        <StyletronProvider value={engine} debug={debug} debugAfterHydration>
          <div className="page-container">
            {/* Router */}
            <Router>
              <Nav className="nav_desktop" />
              <Route path="/" exact component={Home} />
              <Route path="/cart" exact component={Cart} />
              <Route path="/prints" exact component={Products} />
              <Route path="/product/:id" exact component={ProductPage} />
              <Route path="/login" exact component={Login} />
            </Router>

            <div className="app">

            </div>
            {/* Navbar */}
            <Router>

              <Nav className="nav_desktop" />
              <Nav />
              <Switch>
                <Route path="/" exact component={Home} />
                <Route path="/cart" exact component={Cart} />
                <Route path="/product" exact component={Products} />
                <Route path="/product/:id" exact component={ProductPage} />
                <Route path="/signup" exact component={SignUp} />
              </Switch>
            </Router>
            <div className="content-wrap"></div>

            {/* Footer */}
            <Footer />
          </div>
        </StyletronProvider>
      </ShopProvider>
    );
  };
}

export default App;

Answer 1

从您的代码看，您的App似乎返回错误。这个错误是因为<App/>的呈现需要JSX，而您返回的却是一个函数。看起来您已经将ES6中的箭头函数与旧的function方法结合起来了。就用其中的一个吧。像这样：

 const App = () => {
  return (
    <ShopProvider>
      <StyletronProvider value={engine} debug={debug} debugAfterHydration>
        <div className="page-container">
          {/* Router */}
          <Router>
            <Nav className="nav_desktop" />
            <Route path="/" exact component={Home} />
            <Route path="/cart" exact component={Cart} />
            <Route path="/prints" exact component={Products} />
            <Route path="/product/:id" exact component={ProductPage} />
            <Route path="/login" exact component={Login} />
          </Router>

          <div className="app"></div>
          {/* Navbar */}
          <Router>
            <Nav className="nav_desktop" />
            <Nav />
            <Switch>
              <Route path="/" exact component={Home} />
              <Route path="/cart" exact component={Cart} />
              <Route path="/product" exact component={Products} />
              <Route path="/product/:id" exact component={ProductPage} />
              <Route path="/signup" exact component={SignUp} />
            </Switch>
          </Router>
          <div className="content-wrap"></div>

          {/* Footer */}
          <Footer />
        </div>
      </StyletronProvider>
    </ShopProvider>
  );
};

export default App;