Javascript NextJS在_文档中有链接_Javascript_Reactjs_React Router_Next.js

Javascript NextJS在_文档中有链接

javascript reactjs next.js

Javascript NextJS在_文档中有链接,javascript,reactjs,react-router,next.js,Javascript,Reactjs,React Router,Next.js,正在处理使用NextJS的应用程序。有以下问题。当我有一个\u文档文件时，如下所示： import Document, { Head, Main, NextScript } from 'next/document'; import Header from '../components/header/header'; export default class MyDocument extends Document { render() { return ( <htm

正在处理使用NextJS的应用程序。有以下问题。当我有一个

\u文档

文件时，如下所示：

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>
    )
  }
}

从'next/Document'导入文档，{Head，Main，NextScript}；
从“../components/Header/Header”导入标题；
导出默认类MyDocument扩展文档{
render（）{
返回(
//标题是自定义组件
)
}
}

我的头组件如下所示：

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);

import React，{Component}来自'React'；
从“下一个/路由器”导入{withRouter}；
从“下一个/链接”导入链接；
类navigationMobile扩展组件{
render（）{
返回(
认证
);
}
}
使用路由器导出默认值（navigationMobile）；

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

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

问题:

有没有办法不重新加载页面，而仍然只在应用程序的一个位置保留标题组件？

您可以使用自定义的

\u app.js

。这是放置自定义布局的正确位置。

为什么不在中这样的页面中导入

带有

w/o href内部，

带有路由器

i混合了很多东西。它不应该是

或

带路由器的
带
使用HOC的道具吗？