reactjs - nextjs 动态路由渲染内容不起作用-6ren

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

转载作者：行者123 更新时间：2023-12-03 14:44:41

我被这个问题困扰了很多天。我正在使用 Next.js并且有 3 页。

页面/index.js

页面/categories.js

页面/类别/[slug].js

categories/[slug].js正在使用 Next.js获取方法名 getServerSideProps在每个请求上运行并用于在运行时构建动态页面。 categories/[slug].js在页面上呈现动态内容，该动态内容来自 CMS，作为 API 端点的响应。动态内容只不过是一个包含带有 <script /> 的 HTML 的字符串。元素。

备注 : 要从 CMS 中获取内容，我们必须发送 POST请求 CMS凭据，例如用户名、密码和内容的页面 slug。我正在使用 axios库发送一个post请求，方法在 post.js里面文件。
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 Prop 名称 dangerouslySetInnerHTML渲染所有包含 <script /> 的 HTML 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和 slider他们不工作的元素。我认为 <script />这些元素不起作用。但是当我刷新页面时，它们工作正常。看到这个。

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

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

但是按照上面的方法设置链接后，会导致点击硬重新加载页面。但我不想要这个。一切都应该工作。当用户点击类别链接时。
有没有办法解决这个问题 ?
为什么单击 categories/index.js 时内容元素不起作用页 ?
Github repo
代码:
页面/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或 innerHTML , 不作为 HTML 5 specification 执行状态:

script elements inserted using innerHTML do not execute when they are inserted.

如果要插入新的 <script>页面初始渲染后的标签，您需要通过 JavaScript 的 document.createElement('script') 来完成。接口(interface)并使用 element.appendChild() 附加到 DOM以确保他们被执行。
脚本 的原因不工作改变路线后，但他们 做工作刷新页面后绑定(bind)到 Next.js 应用程序生命周期过程。

如果刷新页面，Next.js 会在服务器上预渲染整个网站，并将其作为一个整体发送回客户端。因此，网站被解析为常规静态页面，<script>标签是像往常一样执行。

如果您更改路由，Next.js 不会刷新整个网站/应用程序，而只会刷新其中已更改的部分。换句话说，只有 page组件被提取，它是动态插入现有布局替换以前的page .因此，<script>标签是不是执行。

简单的解决方案
通过解析 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 和动态脚本。然后，您可以插入带有 dangerouslySetInnerHTML 的 HTML并在 JS 中添加脚本:

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

关于reactjs - nextjs 动态路由渲染内容不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64053006/

文章推荐： delphi - 如何为 TPageControl 的 Ttabsheet 实现关闭按钮

文章推荐： multithreading - Dart是否会在多核环境中并行执行隔离？

文章推荐： delphi - Delphi中For循环后的循环变量是什么？

实例分析Try {} Catch{} 作用
今天有小伙伴给我留言问到，try{...}catch(){...}是什么意思？它用来干什么？简单的说他们是用来捕获异常的下面我们通过一个例子来详细讲解下
html - 列表社交媒体链接的 ARIA 作用
我正在努力提高网站的可访问性，但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接，因
java.util.Timer SystemTime 作用？
说现在是 6 点，我有一个 Timer 并在 10 点安排了一个 TimerTask。之后，System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
php - 什么是 Doctrine hydration 作用？
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
python入门:argparse浅析 nargs='+'作用
我就废话不多说了，大家还是直接看代码吧~ ? 1
Maven是什么?Maven的概念+作用+仓库的介绍+常用命令的详解
Maven系列1 1.什么是Maven？ Maven是一个项目管理工具，它包含了一个对象模型。一组标准集合，一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。核心功能 Mav

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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