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

JavaScript React.js

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

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

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

第3743篇《如何在NextJS + React中使用api生成的内容创建用户可定制的动态url？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共1个回答
LGil 2020.03.26

利用自定义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来获取该请求。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android