Question

我正在使用Next.js来呈现应用程序。在我的页面中，我有/ index包含在我的仪表板布局中。这绝对没问题，没有任何问题。

我的页面中还有/ item和/ add-item也包含在我的Dashboard布局中，但是当我调用/ index以外的任何内容时，我收到以下错误：

TypeError: Object(...) is not a function
    at Object../pages/index/index.js (C:\Users\User\Documents\Projects\Project\project-next\src\.next\dist\bundles\pages\item.js:2837:138)

让我感到困惑的是，为什么/ item在/ index失败时/ index直接正常工作。如果我在/ index中注释掉导出，那么转到/ item或任何其他包含在Dashboard中的页面：

//export default Dashboard(Index);

我的文件如下：

/layout/Dashboard/index.js

import React from 'react';
import Head from 'next/head';
import hoistNonReactStatics from 'hoist-non-react-statics';

import Header from './Header';
import Sidebar from './Sidebar';
import Login from '../../pages/login';

import checkUser from '../../utils/checkUser';
import redirect from '../../utils/redirect';

import './normalize.less';
import styles from './styles.less';

const Dashboard = ComposedComponent => {
  class Decorator extends React.Component {
    static async getInitialProps(ctx) {
      const props = {
        isAuthenticated: true,
        data: {
          name: 'dave',
        },
      };
      return props;
    }

    render() {
      if (!this.props.isAuthenticated) {
        return <Login />;
      }

      const layout = children => (
        <React.Fragment>
          <Head>
            <title>Project</title>
            <link
              href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"
              rel="stylesheet"
            />
            <link
              rel="stylesheet"
              href="https://unpkg.com/antd@3/dist/antd.min.css"
            />
            <link
              rel="apple-touch-icon"
              sizes="57x57"
              href="../static/icons/apple-icon-57x57.png"
            />
            <link
              rel="apple-touch-icon"
              sizes="60x60"
              href="../static/icons/apple-icon-60x60.png"
            />
            <link
              rel="apple-touch-icon"
              sizes="72x72"
              href="../static/icons/apple-icon-72x72.png"
            />
            <link
              rel="apple-touch-icon"
              sizes="76x76"
              href="../static/icons/apple-icon-76x76.png"
            />
            <link
              rel="apple-touch-icon"
              sizes="114x114"
              href="../static/icons/apple-icon-114x114.png"
            />
            <link
              rel="apple-touch-icon"
              sizes="120x120"
              href="../static/icons/apple-icon-120x120.png"
            />
            <link
              rel="apple-touch-icon"
              sizes="144x144"
              href="../static/icons/apple-icon-144x144.png"
            />
            <link
              rel="apple-touch-icon"
              sizes="152x152"
              href="../static/icons/apple-icon-152x152.png"
            />
            <link
              rel="apple-touch-icon"
              sizes="180x180"
              href="../static/icons/apple-icon-180x180.png"
            />
            <link
              rel="icon"
              type="image/png"
              sizes="192x192"
              href="/android-icon-192x192.png"
            />
            <link
              rel="icon"
              type="image/png"
              sizes="32x32"
              href="../static/icons/favicon-32x32.png"
            />
            <link
              rel="icon"
              type="image/png"
              sizes="96x96"
              href="../static/icons/favicon-96x96.png"
            />
            <link
              rel="icon"
              type="image/png"
              sizes="16x16"
              href="../static/icons/favicon-16x16.png"
            />
            <link rel="manifest" href="../static/icons/manifest.json" />
            <meta name="msapplication-TileColor" content="#ffffff" />
            <meta
              name="msapplication-TileImage"
              content="../static/icons/ms-icon-144x144.png"
            />
            <meta name="theme-color" content="#ffffff" />
            <script
              defer
              src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"
              integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ"
              crossOrigin="anonymous"
            />
          </Head>
          <div>
            <Header />
            <Sidebar user={this.props.data} />
            <div className={styles.content}>{children}</div>
          </div>
        </React.Fragment>
      );

      return layout(
        <React.Fragment>
          <ComposedComponent {...this.props} />
        </React.Fragment>
      );
    }
  }

  hoistNonReactStatics(Decorator, ComposedComponent);

  return Decorator;
};

export default Dashboard;

/pages/item/index.js

import React from 'react';

import Dashboard from '../../layout/Dashboard';

import styles from './styles.less';

class Item extends React.Component {
  constructor() {
    super();
    this.state = {
      loaded: true
    };
  }

  render() {    
    return (
      <div>
        <p>Item</p>
      </div>
    );
  }
}

export default Dashboard(Item);

最后

/pages/index/index.js

import React from 'react';   
import Dashboard from '../../layout/Dashboard';

import styles from './styles.less';

class Index extends React.Component {
  constructor() {
    super();
    this.state = {};
  }

  render() {

    return (
      <div>
        <p>Index</p>
      </div>
    );
  }
}

export default Dashboard(Index);

正如我所说，转到localhost:3008加载Dashboard布局中的索引就好了。转到加载仪表板布局的任何其他内容，即此示例中的项目将引发错误

Answer 1

你应该导入来自 nextjs 的 useRouter 不是来自 react

正确：

import { useRouter } from 'next/router'

错误：

import {  useRouter } from 'react';

Answer 2

使用nextjs，pages文件夹中每页只能有一个文件。我看到你有像/pages/item.index.js这样的文件..尝试使用这样的模式：

页
- page1.js
- page2.js
部件
- 第1页
  - 页面-1-组件1.js
  - 页面-1-组件2.js
- 第2页
  - 第2页 - component.js

Answer 3

我遇到了同样的问题，我在JSON包中将react和react-dom版本更改为“ next”，并解决了该问题。

"react": "next", 
"react-dom": "next"

Answer 4

我遇到了同样的问题，但我的错误是在页面内创建一个带有三个点（...）的文件，如下所示。请将 /pages/api/notes/[...id].js 重命名为 /pages/api/notes/[id].js

重命名文件名如下

[...id].js => [id].js

React / Next.js对象不是函数

4 个答案: