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

Question

我有多个路线，例如：

1. / solutions /
2. / solutions / web-development /
3. /功能/
4. / features / flexbox /
5. /插件/
6. / 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
};

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

在切换情况下，我在/solutions/和/features/上应用了不同的模板。对于其余的URL，我将应用一个模板。

注意：：page: '/'引用 pages 目录下的index.js，page: '/solutions'引用页面目录下的solutions.js，以此类推。可以根据开发人员的选择进行更改/变化。

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

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

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