NextJS со ссылками в _document - PullRequest
Новая
       26

NextJS со ссылками в _document

0 голосов
/ 05 сентября 2018

Работа над приложением, которое использует 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>
    )
  }
}

И мой заголовочный компонент выглядит следующим образом: 

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 на самой странице, маршрутизация работает нормально. Проблема, однако, заключается в том, что мне придется разместить этот компонент на каждой странице.

Вопрос:

Есть ли способ не перезагружать страницу и при этом иметь компонент заголовка только в одном месте приложения?

1 Ответ

0 голосов
/ 10 сентября 2018

Вы можете использовать пользовательский _app.js. Это правильное место, где можно разместить пользовательский макет. https://github.com/zeit/next.js/tree/master#custom-app

...