如何使用动态路由在页面中触发相同的.js？

Question

我有多条路线，例如：

/解决方案/
/solutions/web-development/
/功能/
/features/flexbox/
/插件/
/plugins/permalink/

等等。

我想运行所有这些路线的同一个文件 (abc.js)。我检查了 Next.js 的 Dynamic Routing 部分，但根据该部分，我的理解是我需要创建多个目录并在多个实例上复制相同的文件。

有什么方法可以运行所有 DEFINED 路由或整个站点的单个文件？

编辑： 我知道有一种方法可以通过创建 Custom Server and manually add dynamic routes BUT 我希望实现这无需创建外部服务器。

Answer 1

我找到了解决这个问题的方法。这可以使用 next.config.js 文件来完成。您唯一需要的是 URLs 页面，然后您可以应用相同的文件，甚至添加条件以使用多个文件进行应用。

示例代码如下：

module.exports = {
  exportPathMap: async function(
    defaultPathMap,
    { dev, dir, outDir, distDir, buildId }
  ) {
    const paths = {};
    const pageURLs = [
      '/solutions/',
      '/solutions/web-development/',
      '/features/',
      '/features/flexbox/',
      '/plugins/',
      '/plugins/permalink/'
    ];

    var loopInit = 0;
    var loopCount = pageURLs.length;
    var url = '';
    for (loopInit = 0; loopInit < loopCount; loopInit += 1) {
      url = pageURLs[loopInit];
      switch(url) {
        case '/solutions/':
          paths[`${url}`] = {
            page: '/solutions',
            query: {
              slug: url
            }
          };
          break;
        case '/features/':
          paths[`${url}`] = {
            page: '/features',
            query: {
              slug: url
            }
          };
          break;
        default:
          paths[`${url}`] = {
            page: '/',
            query: {
              slug: url
            }
          };
          break;
      }
    }

    return paths;
  },
  exportTrailingSlash: true
};

在上面的示例中，我在 pageURLs 变量中硬编码了 URLs。您可以在其中传递动态值，例如从 WordPress、URL 从 Drupal 或任何其他 获取永久链接CMS 或 Headless CMS 等

在转换案例中，我在 /solutions/ 和 /features/ 上应用了不同的模板。对于剩余的 URL，我正在应用一个模板。

注意： page: '/' 引用 pages 目录下的 index.js 同样， page: '/solutions' 引用 solutions.js pages目录下等等。根据开发者的选择，它可以是 changed/vary。

我已经在 Next.js 的 9.1.4 版本上测试了这个解决方案。请参阅 Next.js 文档以获取更多详细信息。

已编辑： 此解决方案适用于服务器端呈现和 Next.js 导出。

如何使用动态路由在页面中触发相同的.js？

How to use Dynamic Routing to trigger the same .js in pages?

reactjs

next.js