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

Question

我有多个路线，例如：

1. /解决方案/
2. /solutions/web-development/
3. /特征/
4. /features/flexbox/
5. /plugins/
6. /plugins/永久链接/

等等。

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

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

编辑：我知道有一种方法可以通过创建 Custom Server and manually add dynamic routes 来做到这一点但是我希望在不创建外部服务器的情况下实现这一目标。

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 变量中硬编码了 URL。您可以在其中传递动态值，例如从 WordPress 获取永久链接、从 Drupal 或任何其他 CMS 或 Headless CMS等

在 switch 案例中，我在 /solutions/ 和 /features/ 上应用了不同的模板。对于其余的 URL，我将应用一个模板。

注意： page: '/' 指 pages 目录下的index.js 类似，page: '/solutions' 指 pages 目录下的 solutions.js 等等。它可以根据开发人员的选择进行更改/变化。

我已经在 Next.js 的9.1.4 版本上测试了这个解决方案。有关详细信息，请参阅 Next.js 文档。

1. https://nextjs.org/docs#custom-configuration
2. https://nextjs.org/docs#usage

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