使用NextJS的应用程序。有以下问题。当我有这样的_document文件时：
import Document, { Head, Main, NextScript } from 'next/document';
import Header from '../components/header/header';
export default class MyDocument extends Document {
render() {
return (
<html>
<Head>
</Head>
<body>
<Header /> // Header is custom component
<Main />
<NextScript />
</body>
</html>
)
}
}
我的Header组件如下：
import React, { Component } from 'react';
import { withRouter } from 'next/router';
import Link from 'next/link';
class navigationMobile extends Component {
render() {
return (
<nav>
<Link href="/auth"><a>Auth</a></Link>
</nav>
);
}
}
export default withRouter(navigationMobile);
由于此链接位于文件之外，因此会因某种原因重新加载页面。这将失去应用程序状态，破坏用户体验和类似的功能，无法实现SPA的实现目的。
当我将页眉组件放在页面本身时，路由工作正常。但问题是，我必须将此组件放在每个页面中。
有没有办法不重新加载页面，仍然只有应用程序的一个位置的标题组件？
您可以使用自定义_app.js。这是放置自定义布局的正确位置。 https://github.com/zeit/next.js/tree/master#custom-app