除非我专门刷新页面，否则脚本在 React、NextJS 项目中不起作用答案

【问题标题】：Scripts not working in React, NextJS project unless I specifically refresh the page除非我专门刷新页面，否则脚本在 React、NextJS 项目中不起作用
【发布时间】：2022-09-23 04:53:06
【问题描述】：

我不得不将基于纯 HTML、CSS 和 javascript 构建的大型代码库重构为 ReactJS 和 NextJS 应用程序。代码库有很多链接和脚本，其中一些脚本适用于所有页面，而一些脚本仅适用于特定页面。

在我所做的设置中，我创建了一个 Meta.js 文件，其中保存了所有链接和脚本，还创建了一个 Layout.js 文件，其中包含 Meta.js 以及应用于所有页面的通用导航栏和侧边栏布局.

我现在面临的问题是，除非刷新页面，否则某些脚本/功能不起作用。例如，我从主页进入应用程序，即 index.js 文件，然后导航到设置页面，即 settings.js 文件。

settings.js 页面有一些选项卡，其中使用了一些脚本，但除非我重新加载页面，否则它将无法工作。这可能是什么问题，我该如何解决。

以下是下面列出的一些重要文件：

元.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

布局.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;

_app.js

// styles
import \'../styles/normalize.css\'
import \'../styles/webflow.css\'
import \'../styles/listwise.webflow.css\'
import \'../styles/styles.css\'
// website constant layout
import Layout from \'../components/Layout\'

function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  )
}

export default MyApp

导航.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

设置.js

import React, {useState} from \'react\'
import Head from \"next/head\"
import Script from \"next/script\"

const settings = () => {

  return (
<>
<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>

<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

另外，我想问一下如何最好地渲染那些仅适用于特定页面的脚本，我应该将其添加到在应用程序初始渲染时加载的 Meta.js 文件中，还是创建一个单独的文件并将其添加到页面导航到时需要它的页面。

你应该阅读路由nextjs.org/docs/routing/introduction
@KonradLinkowski，谢谢。我确实知道路线，并且还浏览了您分享的参考资料，但无法弄清楚这与我面临的当前问题有何关系。
嗨，我认为您可以尝试使用 Script 标签在相应的组件头部添加这些脚本。 nextjs.org/docs/basic-features/script 。我希望这个能帮上忙：）

标签： javascript html reactjs next.js

【解决方案1】：

Nextjs 脚本组件可以采用 strategy 属性。它的默认值为afterInteractive，这意味着脚本将首先加载页面变为交互所需的主要javascript前您在Script 标记中链接的脚本。

如果您需要提前加载任何脚本，因为您的页面的某些功能依赖于它，您需要将 strategy 属性设置为 beforeInteractive，如下所示：

<Script src=" ... " strategy="beforeInteractive" />

更多信息Next docs

【讨论】：

【解决方案2】：

我也面临这个问题，但目前我只是通过将所有脚本代码导入 useEffect 来解决这个问题，我在 useEffect 中删除我的脚本代码之前的所有事件

 useEffect(() => {
      $(document).ready(function () {
      var allElems = $('body').find('*');
      allElems.each(function () {
      var elm = this, //javascript DOM object
      $elm = $(this) //jquery object for element.
      $elm.off();
      // your script code here
   });
 });

【讨论】：

【解决方案3】：

你能解决吗？我目前面临同样的问题。

【讨论】：

请不要添加我也是作为答案。它实际上并没有提供问题的答案。如果你有一个不同但相关的问题，那么ask它（如果它有助于提供上下文，请参考这个问题）。如果你对这个特定的问题感兴趣，你可以upvote它，留下comment，或者在你有足够的reputation时开始bounty。