如何在NextJS + React中使用api生成的内容创建用户可定制的动态url？

AEva伽罗2020-03-26

我需要有关React的Nextjs中可自定义动态网址的帮助。我创建了一个Nextjs + React应用，该应用利用自定义server.js来处理路由和“静态”动态url。现在，我需要迁移此现有设置，以能够使用用户选择的从-let的say-CMS中定义的所有子句，并且仍然呈现正确的页面（内容将从api中检索）。

我想我需要做的是：让我们有一个用户定义的url： www.host.com/some-blog-group/post-of-the-day

让我们通过处理所有路由pages/index.js在server.js。

server.get('*', (req, res) => handle(req, res));

在中page/index.js，我需要将请求发送回后端，即。http://backend.com/get-page/some-blog-group/post-of-the-day
后端将返回一个响应，该响应基本上由要为页面呈现的组件列表以及页面的类型和其他不可缺少的数据组成（以帮助格式化和检索组件的内容/布局）。
然后，每个组件将根据需要渲染point.3给定的渲染数据。
多田！页面呈现没有问题。

这种思路是正确的吗？现有应用程序已经有几十个页面（按照Next.js的建议通过文件夹“静态”设置，并根据需要在server.js中重新路由以进行动态路由）。有没有更好的方法来迁移此设置？或者也许我一开始不需要Nextjs？

LGil2020/03/26 16:03:27

利用自定义server.js处理路由

我假设是一台快递服务器，为什么不使用nextjs路由呢？

您可以创建具有以下内容的pages / test / index.js：

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

class Test extends React.Component {
  static async getInitialProps({ query }) {
    return { query };
  }

  render() {
    return (
      <div>
        <Link href="/">
          <a>home</a>
        </Link>
        <pre>
          {JSON.stringify(this.props.query, undefined, 2)}
        </pre>
      </div>
    );
  }
}

export default Test;

然后创建具有以下内容的pages / test / [... all] .js：

import Test from "./index";
export default Test;

您应该能够打开localhost / test / 1/2/3并获得以下查询：

{
  "all": [
    "1",
    "2",
    "3"
  ]
}

索引现在可以根据查询应用要呈现的任何逻辑。如果您需要基于查询发出请求，则可以使用getInitialProps来获取该请求。

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer