I had to refactor a large codebase built on pure HTML, CSS, and javascript into a ReactJS and NextJS application. The codebase had a whole lot of links and scripts whereby some scripts applied for all pages while some applied for only specific pages.
In the set-up I did, I created a Meta.js file where I kept all links and scripts and also created a Layout.js file which held the Meta.js as well a common navbar and sidebar layout which was applied to all pages.
The issue I am facing presently now is that some scripts/functionality do not work unless the page is refreshed. For instance, I enter the application from the homepage which is the index.js file, and then navigate to the settings page, which is a settings.js file.
The settings.js page has some tab that uses some script in it but will not work unless I reload the page. What can be the issue with this and how can I fix this.
Here are some of the important files listed below:
Meta.js
import React from 'react'
import Head from 'next/head'
import Script from 'next/script'
const Meta = ({title, keywords, description}) => {
return (
<>
<Head>
<meta charSet="utf-8" />
<meta content="Webflow" name="generator" />
</Head>
<Script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></Script>
<Script src='/CustomScript.js'></Script>
<Script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' strategy='beforeInteractive' crossOrigin="anonymous"></Script>
<Script src='/webflow.js'></Script>
<Script src='https://fengyuanchen.github.io/datepicker/js/datepicker.js'></Script>
<Script src='https://cdn.jsdelivr.net/npm/flatpickr'></Script>
<Script src='https://cdn.quilljs.com/1.3.6/quill.js' strategy='beforeInteractive'></Script>
</>
)
}
export default Meta
Layout.js
import Nav from "./Nav";
import Meta from "./Meta";
const Layout = ({children}) => {
return (
<>
<Meta />
<Nav/>
<div className="body">
<main>
{children}
</main>
</div>
</>
);
}
export default Layout;
Nav.js
import React from 'react'
import Image from 'next/image'
import Link from 'next/link'
const Nav = () => {
return (
<div className="app-nav-layout">
<Link href="#"><Image src="/listwise-logo-black-nospace.svg" width={130} height={130} alt="" className="left-navbar-logo" /></Link>
</div>
<nav role="navigation" className="left-navbar-menu w-nav-menu">
<Link href="/dashboard/listings/addListing">Create new listing</Link>
<Link href="/">Dashboard<br/></Link>
<Link href="/dashboard/listings/allListings"><a className="left-navbar-link w-nav-link"><span className="material-icons-round md-18 mr-8">list_alt</span> Listings<br/></a></Link>
<Link href="/dashboard/settings/settings">Account settings</Link>
<Link href="/dashboard/listings/myListwise">My Listwise</Link>
</nav>
</div>
)
}
export default Nav
settings.js
import React, {useState} from 'react'
import Head from "next/head"
import Script from "next/script"
const settings = () => {
<Head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" />
<link rel="stylesheet" href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css" />
<link rel="stylesheet" href="https://unpkg.com/filepond/dist/filepond.min.css" />
<Script src="https://unpkg.com/filepond-plugin-file-encode/dist/filepond-plugin-file-encode.min.js"></Script>
<Script src="https://unpkg.com/filepond/dist/filepond.min.js"></Script>
</Head>
return (
<div className="app-main-layout-container">
<div className="tabs-menu w-tab-menu">
<a data-w-tab="Personal" className="tab-link w-inline-block w-tab-link w--current">
<div className="material-icons-round md-24 icon-acc-settings">person</div>
<div className="tab-text">Personal profile</div>
</a>
<a data-w-tab="Business" className="tab-link w-inline-block w-tab-link">
<div className="material-icons-round md-24 icon-acc-settings">store</div>
<div className="tab-text">Business profile</div>
</a>
<a data-w-tab="Social" className="tab-link w-inline-block w-tab-link">
<div className="material-icons-round md-24 icon-acc-settings">share</div>
<div className="tab-text">Social links</div>
</a>
</div>
<div className="tabs-content w-tab-content">
<div data-w-tab="Personal" className="w-tab-pane w--tab-active">
<div className="w-form">
<form id="wf-form-profile" name="wf-form-profile" data-name="profile" method="get">
<div className="form-group"><label htmlFor="name-4" className="label">Upload profile photo</label>
</form>
</div>
<div data-w-tab="Business" className="w-tab-pane">
<div className="w-form">
<form id="wf-form-profile" name="wf-form-profile" data-name="profile" method="get">
<div className="form-group"><label htmlFor="name-4" className="label">Business name</label>
<div className="hint marginb--20px">This is usually the name you work under</div><input type="text" className="input w-input" maxLength="256" name="Business-Name" data-name="Business Name" placeholder="Enter business name" id="business-name" required="" />
</form>
</div>
<div data-w-tab="Social" className="w-tab-pane">
<div className="w-form">
<form id="wf-form-profile" name="wf-form-profile" data-name="profile" method="get">
<div className="form-group"><label htmlFor="instagram-link" className="label">Instagram profile link</label><input type="text" className="input w-input" maxLength="256" name="Instagram-Link" data-name="Instagram Link" placeholder="www.instagram.com/myname" id="instagram-link" /></div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
export default settings
Also, I will like to ask how best to render those scripts that only work for specific pages, should I add the to the Meta.js file which gets loaded on the initial rendering of the application, or creates a separate file and add it to the page that needs it when the page is navigated to.