Question

正在处理使用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);

由于此链接位于文件外部，因此由于某些原因将重新加载页面。这将丢失应用程序状态并破坏UX，并破坏实现SPA的目的。

当我将Header组件放置在页面本身中时，路由工作正常。但是，问题在于我将不得不在每个页面中放置此组件。

问题：

是否有一种方法可以不重新加载页面，而仅在应用程序的一个位置保留标头组件？

Answer 1

您可以使用自定义_app.js。这是放置自定义布局的正确位置。 https://github.com/zeit/next.js/tree/master#custom-app

在_document中具有链接的NextJS

问题：

1 个答案: