NextJS 在 _document 中有链接答案

【问题标题】：NextJS having links in the _documentNextJS 在 _document 中有链接
【发布时间】：2019-02-10 18:17:06
【问题描述】：

在使用 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 实现某些东西的目的。

当我将 Header 组件放在页面本身时，路由工作正常。然而问题是我必须把这个组件放在每个页面中。

问题：

有没有办法不重新加载页面，并且仍然只在应用程序的一个地方有标题组件？

【问题讨论】：

为什么不在docs 之类的页面中导入<Header/>？ <Link /> 带有 <a> 内部没有 href，withRouter 恕我直言，很多东西都混杂在一起。不应该是 <Link/> 或 withRouter 和 <a/> 使用来自 HOC 的道具吗？

标签： javascript reactjs react-router next.js

【解决方案1】：

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

【讨论】：