Why does Next.js reload the page when switching pages in the menu?

A

Andrey Sergeev2020-08-18 15:17:12

JavaScript

Andrey Sergeev, 2020-08-18 15:17:12

Hello!

The bottom line is that on React.js such a menu works as it should, namely, we open the burger menu, select the page, click on the link in the menu and the page content changes, but the menu remains. This proves that React.js only changed the content of the page and didn't touch the combo burger menu.

Regarding Next.js. There, with similar actions, the menu is removed and as if the page is reloading. It happens quickly and it's cool, but because of this there is not even the impression that this is a SPA.

The question is, is it possible to implement this somehow, or maybe I made a mistake somewhere, please look at the code and help in the solution.

layout.js

import React from 'react'
import Header from '../components/includes/Header'
import Footer from '../components/includes/Footer'
import Head from 'next/head'

const Layout = ({ children, title = 'ValeShops' }) => {
  
  return (
    <React.Fragment>
      <Head>
        <title>{title} | ValeShops</title>
      </Head>
      <Header />
      <main>
        <section>
          { children }
        </section>
      </main>
      <Footer />
    </React.Fragment>
  )
}

export default Layout

Header.js

import Link from 'next/link'
import Search from '../UI/Search'
import Humburger from '../UI/Humburger'

 const Header = () => {

  return (
    <>
      <section>
        <div className='header'>
          <div className='header__column--left'>
            <div className='header__logo'>
              <Link href={'/'}>
                <a>
                  <span></span>
                </a>
              </Link>
            </div>
            <Search 
              className='search__field'
            />
            <ul className='navigation'>
              <li>Top-10 Deals</li>
              <li>
                <Link href={'/stores'}>
                  <a>All stores</a>
                </Link>
              </li>
            </ul>
          </div>
          <ul className='navigation header__column--right'>
            <li>
              <Link href={'/login'}>
                <a>Login</a>
              </Link>
            </li>
            <li>
              <select>
                <option value="">English</option>
                <option value="">English</option>
                <option value="">English</option>
              </select>
            </li>
            <li>
              <select>
                <option value="">Country</option>
                <option value="">Country</option>
                <option value="">Country</option>
              </select>
            </li>
            <li>
              <Humburger />
            </li>
          </ul>
        </div>
      </section>
    </>
  )
}

export default Header;

Humburger.js

import React, { Component } from 'react'
import Menu from './Menu'

export class Humburger extends Component {

  state = {
    status: false
  }

  isOpenMenu = event => {
    this.setState({
      status: !this.state.status
    })
  }

  render() {
    const cls = ['humburger']

    if(this.state.status) {
      cls.push('open');
    }
    
    return (
      <>
        <div 
          className={cls.join(' ')}
          onClick={this.isOpenMenu}
        >
          <span className='humburger-t'></span>
          <span className='humburger-c'></span>
          <span className='humburger-b'></span>
        </div>
        <Menu 
          isOpen={this.state.status}
        />
      </>
    )
  }
}

export default Humburger

Menu.js

import Link from 'next/link'
import { useRouter } from 'next/router'

const Menu = props => {

  const cls = ['humburger__menu']

  if(props.isOpen) {
    cls.push('open')
  }

  const router = useRouter();

  return (
    <>
      <div className={cls.join(' ')}>
        <ul>
          <li>
            <Link href={'/how-it-works'}>
              <a>How it works</a>
            </Link>
          </li>
          <li>
            <Link href={'/news'}>
              <a>News</a>
            </Link>
          </li>
          <li>
            <Link href={'/about'}>
              <a>About</a>
            </Link>
          </li>
          <li>
            <Link href={'/user-agreement'}>
              <a>User Agreement</a>
            </Link>
          </li>
          <li>
            <Link href={'/privacy-policy'}>
              <a>Privacy Policy</a>
            </Link>
          </li>
        </ul>
      </div>
    </>
  )
}

export default Menu

All pages of type Home
Home.js

import Layout from "../components/Layout"

const Home = () => {
  return (
    <Layout
      title='Home'
    >
      <div className='home'>
        <h1>Home</h1>
      </div>
    </Layout>
  )
}

export default Home