Question

不确定为什么会出现错误，这是我的index.js和App.js（默认导出）。我在app.js中使用了导出默认值。

index.js：

import "./index.css";
import App from "./App";
import "bootstrap/dist/css/bootstrap.css";
import "font-awesome/css/font-awesome.css";
<App />;

App.js

import React, { Component } from "react";
import { ToastContainer } from "react-toastify";
import NavBar from "../components/navBar";
import auth from "../services/authService";
import "react-toastify/dist/ReactToastify.css";
import "./App.css";

class App extends Component {
  state = {};

  componentDidMount() {
    const user = auth.getCurrentUser();
    this.setState({ user });
  }

  render() {
    const { user } = this.state;

    return (
      <React.Fragment>
        <ToastContainer />
        <NavBar user={user} />
      </React.Fragment>
    );
  }
}

export default App;

Answer 1

修复，将index.js设置为类并导出。

import React, { Component } from "react";
import "./index.css";
import App from "./App";
import "bootstrap/dist/css/bootstrap.css";
import "font-awesome/css/font-awesome.css";
class Index extends Component {
  state = {};
  render() {
    return <App />;
  }
}

export default Index;

Answer 2

日期：23/01/2021

我的 Next.js 应用也遇到过这个问题。

如果您使用的是功能组件而不是类组件，您在某些情况下也会收到此错误。我完全不知道为什么会发生这种情况，但我只是通过在页面底部 exporting 我的组件解决了这个问题。

像这样，

案例错误场景：

export default function Home(){
      return (<>some stuffs</>)
}

Home.getInitialProps = async (ctx) => {
    return {}
}

Error: The default export is not a React Component in page: "/"

如何解决？

我只是将导出放在页面底部，然后它就会消失。

像这样，

function Home(){
      return (<>some stuffs</>)
}

Home.getInitialProps = async (ctx) => {
    return {}
}

export default Home;

希望对你有帮助！

Answer 3

对我来说，这只是因为我有一个 .ts 而不是 .tsx 文件。它可能会使用 .js 而不是 .jsx 扩展名做同样的事情。

默认导出不是页面中的React Component：“ /” NextJS

3 个答案: