Я использую Next.js для визуализации приложения. На моих страницах есть / index, который обернут в мой макет Dashboard. Это работает абсолютно нормально, без каких-либо проблем.
У меня также есть / 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);
Мои файлы выглядят следующим образом:
/ макет / Панель управления / 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;
/ страницы / пункт / 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);
и наконец
/ страницы / индекс / 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 просто отлично. Переход к чему-либо еще, что загружает макет Dashboard, т.е. элемент в этом примере выдает ошибку