Next.js基于本地数据实现三级嵌套动态路由的开发咨询

实现步骤 #

1. 调整文件结构

Next.js嵌套动态路由需要用文件夹层级来匹配路由层级，你需要把原有二级路由的单文件改成文件夹结构，调整后pages/cars目录结构如下：

pages/cars/
├── index.js # 原有第一级路由 /cars 无需修改
└── [name]/ # 新建同名文件夹，替换原来的 [name].js 单文件
    ├── index.js # 将原 [name].js 的代码移到此处，对应二级路由 /cars/[name]
    └── [modelId].js # 新建文件，对应三级路由 /cars/[name]/[modelId]

2. 修改二级路由跳转逻辑

修改pages/cars/[name]/index.js代码，给每个车型添加跳转到三级详情页的链接：

import React from 'react';
import Link from 'next/link';
import { cars } from '../../../data';

export default function CategoriesCars({ cars }) {
  return (
    <div>
      {cars.models.map((m) => (
        <Link key={m.id} href={`/cars/${cars.name}/${m.id}`} passHref>
          <p>{m.name}</p>
        </Link>
      ))}
    </div>
  );
}

// 原有getStaticPaths、getStaticProps逻辑无需修改
export const getStaticPaths = async () => {
  const paths = cars.map((c) => ({
    params: {
      name: c.name,
    },
  }));
  return { paths, fallback: false };
};

export const getStaticProps = async (context) => {
  const { params } = context;
  const response = cars.filter((c) => c.name === params.name);
  return {
    props: {
      cars: response[0],
    },
  };
};

注：本地静态数据不需要加await，原有代码里的await可以直接删掉，不影响运行

3. 编写三级路由代码

在pages/cars/[name]/[modelId].js中写入以下内容：

import { cars } from '../../../../data';
import Image from 'next/image'; // 用next/image优化图片加载，不需要可以删掉

export default function ModelDetail({ model }) {
  return (
    <div>
      <h1>{model.name}</h1>
      <Image src={model.image} alt={model.name} width={600} height={400} />
    </div>
  );
}

// 生成所有三级路由的静态路径
export const getStaticPaths = async () => {
  const paths = [];
  // 遍历所有分类，再遍历分类下的所有车型，生成全量路径
  cars.forEach(category => {
    category.models.forEach(model => {
      paths.push({
        params: {
          name: category.name,
          modelId: model.id.toString() // 路由参数必须为字符串
        }
      })
    })
  })
  return { paths, fallback: false };
};

// 根据路由参数获取对应车型数据
export const getStaticProps = async (context) => {
  const { params } = context;
  // 先找到对应分类
  const targetCategory = cars.find(c => c.name === params.name);
  // 再从分类下找到对应id的车型，注意路由参数是字符串，要转成数字匹配
  const targetModel = targetCategory.models.find(m => m.id === Number(params.modelId));
  return {
    props: {
      model: targetModel,
    },
  };
};

完成以上操作后即可正常访问/cars/sedan/1这类三级路由。

内容的提问来源于stack exchange，提问作者cajie