nextjs 动态路由渲染内容不起作用

2024-04-09

我被这个问题困扰了很多天。我在用Next.js https://nextjs.org/并有 3 页。

页面/index.js
页面/categories.js
页面/类别/[slug].js

The categories/[slug].js正在使用Next.js https://nextjs.org/获取方法名称获取服务器端属性 https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering它在每个请求上运行并用于在运行时构建动态页面。这categories/[slug].js正在页面上呈现动态内容，动态内容来自 CMS 作为 API 端点的响应。动态内容只不过是一个包含 HTML 的字符串<script />元素。

Note：要从 CMS 获取内容，我们必须发送POST请求与CMS凭据，例如用户名、密码和内容的页面片段。我在用axios https://github.com/axios/axios发送 post 请求的库，方法在里面post.js file.

post.js:

import axios from 'axios';

const postCMS = async (slug) => {
    const url = `${process.env.CMS_API_URL}/render-page/`;
    let pageSlug = slug;

    // If the pageSlug is not start with `/`, then create the slug with `/`
    if (!pageSlug.startsWith('/')) {
        pageSlug = `/${pageSlug}`;
    }

    const head = {
        Accept: 'application/json',
        'Content-Type': 'application/json'
    };

    const data = JSON.stringify({
        username: process.env.CMS_API_USERNAME,
        password: process.env.CMS_API_PASSWORD,
        slug: pageSlug
    });

    try {
        const response = await axios.post(url, data, {
            headers: head
        });
        return response.data;
    } catch (e) {
        return e;
    }
};

export default postCMS;

但对于渲染内容categories/[slug].js页面，我正在使用Reactjs https://reactjs.org/道具名称危险地设置InnerHTML https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml渲染所有包含以下内容的 HTML<script />JSON 字符串中的元素。

页面/类别/[slug].js:

<div dangerouslySetInnerHTML={{ __html: result.html }} />

内容根据每个 slug 加载良好。但是当我导航到该类别页面时，即pages/categories/index.js.

<Link href="/categories/[slug]" as="/categories/online-cloud-storage">
      <a>Online Cloud Storage</a>
</Link>

它有一个<Link />元素以及当我单击它时。

动态内容加载正常，但动态内容包含accordion and slider他们不起作用的元素。我认为<script />这些元素不起作用。但是当我刷新页面时它们工作正常。看到这个。

当我将链接设置为这样时，它们也可以正常工作。

<Link href="/categories/online-cloud-storage" as="/categories/online-cloud-storage">
          <a>Online Cloud Storage</a>
 </Link>

但是像上面的方法设置链接后，点击会导致页面硬重新加载。但我不想要这个。一切都应该有效。当用户单击类别链接时。

有没有办法来解决这个问题?

为什么当您单击categories/index.js page?

Github 仓库 https://github.com/john45321/next.js-dynamic-content

Code:

页面/index.js:

import React from 'react';
import Link from 'next/link';

const IndexPage = () => {
    return (
        <div>
            <Link href="/categories">
                <a>Categories</a>
            </Link>
        </div>
    );
};

export default IndexPage;

页面/类别/index.js:

import React from 'react';
import Link from 'next/link';

const Categories = () => {
    return (
        <div>
            <Link href="/categories/[slug]" as="/categories/online-cloud-storage">
                <a>Online Cloud Storage</a>
            </Link>
        </div>
    );
};

export default Categories;

页面/类别/[slug].js:

import React from 'react';
import Head from 'next/head';
import postCMS from '../../post';

const CategoryPage = ({ result }) => {
    return (
        <>
            <Head>
                {result && <link href={result.assets.stylesheets} rel="stylesheet" />}
            </Head>
            <div>
                <h1>Category page CMS Content</h1>
                <div dangerouslySetInnerHTML={{ __html: result.html }} />
            </div>
        </>
    );
};


export const getServerSideProps = async (context) => {
  const categorySlug = context.query.slug;
  const result = await postCMS(categorySlug);
  return {
    props: {
      result
    }
  };
};


export default CategoryPage;

这里的问题是<script>标签是动态地插入与dangerouslySetInnerHTML or innerHTML，不执行为HTML 5 规范 https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0 states:

使用innerHTML 插入的脚本元素在插入时不会执行。

如果你想插入新的<script>页面最初呈现后的标签，您需要通过 JavaScript 来完成document.createElement('script')接口并附加到 DOMelement.appendChild()以确保他们被处决。

脚本的原因不工作改变路线后，但他们do work刷新页面后，该页面与 Next.js 应用程序生命周期过程相关联。

如果刷新页面，Next.js 会在服务器上预渲染整个网站，并将其作为一个整体发送回客户端。因此，该网站被解析为常规静态页面，并且<script> tags are像平常一样执行。
如果您更改路由，Next.js 不会刷新整个网站/应用程序，而只会刷新其中已更改的部分。换句话说，只有page组件被获取并且它是动态地插入到现有布局中替换以前的布局page。因此，<script>标签是not被执行。

简单的解决方案

让一些现有的库通过解析 HTML 字符串并重新创建 DOM 树结构来为您处理繁重的工作。下面是它在 jQuery 中的样子：

import { useEffect, useRef } from 'react';
import $ from 'jquery';

const CategoryPage = ({ result }) => {
  const element = useRef();
  useEffect(() => {
    $(element.current).html($(result.html));
  }, []);

  return (
    <>
      <Head>
        {result && <link href={result.assets.stylesheets} rel="stylesheet" />}
      </Head>
      <div>
        <h1>Category page CMS Content</h1>
        <div ref={element}></div>
      </div>
    </>
  );
};

export const getServerSideProps = async (context) => {
  /* ... */
  return { props: { result } };
}

更难的解决方案

你必须找到一种方法来提取所有<script>从 HTML 字符串中提取标签并将它们单独添加到您的页面中。最简洁的方法是修改 API 响应，以在两个单独的字符串中提供静态 HTML 和动态脚本。然后，您可以使用以下命令插入 HTMLdangerouslySetInnerHTML并在JS中添加脚本：

const scripts = extractScriptTags(result.html);    // The hard part
scripts.forEach((script) => {
  const scriptTag = document.createElement('script');
  scriptTag.innerText = script;
  element.current.appendChild(scriptTag);
});

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

ReactJS

Nextjs