Next.js(React应用开发框架)实战——路由(一)

说明：

• 完整代码Github（https://github.com/VinciYan/next-routing.git）

创建项目

安装Node.js，设置淘宝镜像源

npm config set registry https://registry.npmmirror.com

新建文件夹“NextRouting”，打开VS Code，终端输入

npm install -g npx
npx create-next-app next-routing

新建项目后，文件目录如下

└─next-routing│  .eslintrc.json│  .gitignore│  next-env.d.ts│  next.config.mjs│  package-lock.json│  package.json│  postcss.config.mjs│  README.md│  tailwind.config.ts│  tsconfig.json│  ├─node_modules│        ├─public│      next.svg│      vercel.svg│    └─src└─appfavicon.icoglobals.csslayout.tsxpage.tsx

运行项目

npm run dev

浏览器打开

http://localhost:3000

页面显示“Get started by editing src/app/page.tsx​”，这告诉我们可以通过修改“src/app/page.tsx​”文件修改首页的内容

基本路由

新建文件“src\app\about\page.tsx”

export default function About() {return <h1>关于页面</h1>;
}

浏览器打开

http://localhost:3000/about

此时，访问如下链接，会跳转到默认404页面

http://localhost:3000/dashboard

同理，如果新建文件“src\app\dashboard\page.tsx”，正常跳转到dashboard页面

export default function DashBoard() {return <h1>这是一个看板</h1>;
}

嵌套路由

新建文件“src\app\blog\page.tsx”

export default function Blog() {return <h1>博客首页</h1>;
}

分别新建文件“src\app\blog\first\page.tsx”和“src\app\blog\second\page.tsx”

export default function BlogFirst() {return <h1>第二篇博客</h1>;
}

export default function BlogSecond() {return <h1>第二篇博客</h1>;
}

不难理解三个页面的访问链接如下：

动态路由

新建文件“src\app\province\page.tsx”和“src\app\province\[provinceId]\page.tsx”（注意文件夹[provinceId]​要使用方括号）

export default function Province() {return <h1>全国各省</h1>;
}

export default function ProvinceDetail() {return <h1>江苏省详情</h1>;
}

修改文件“src\app\province\[provinceId]\page.tsx”

export default function ProvinceDetail({ params } : { params : { provinceId : string}}) {if(params.provinceId === "32") {return <h1>江苏省（{params.provinceId}）详情</h1>;}if(params.provinceId === "34") {return <h1>安徽省（{params.provinceId}）详情</h1>;}return <h1>江苏省和安徽省之外的详情</h1>;
}

动态嵌套路由

新建文件“src\app\province\[provinceId]\city\[cityId]\page.tsx”

import { notFound } from "next/navigation";const jiangsu = ["320100", "320200", "320300", "320400", "320500", "320600","320700","320800","320900","321000","321100","321200","321300"];export default function ProvinceDetail({ params } : { params : { provinceId : string; cityId : string}}) {if(params.provinceId === "32" && params.cityId == "320100") {return <h1>江苏省（{params.provinceId}）南京市（{params.cityId}）详情</h1>;}if(params.provinceId === "34" && params.cityId == "341200") {return <h1>安徽省（{params.provinceId}）阜阳市（{params.cityId}）详情</h1>;}return <h1>江苏省南京市和安徽省阜阳市之外的详情</h1>;
}

Slug路由

新建文件“src\app\map\[…slug]\page.tsx”（注意[...slug]​文件夹中方括号有三个点）

export default function Car({params,
}:{params: {slug:string[];};
}) {if(params.slug.length === 2 && params.slug[0] === "320000" && params.slug[1] === "320100") {return (<h1>你正在查看江苏省（{params.slug[0]}）南京市（{params.slug[1]}）的地图</h1>  );    }if(params.slug.length === 2 && params.slug[0] === "320000" && params.slug[1] === "320200") {return (<h1>你正在查看江苏省（{params.slug[0]}）无锡市（{params.slug[1]}）的地图</h1>  );    }if(params.slug.length === 3 && params.slug[0] === "320000" && params.slug[1] === "320200" && params.slug[2] === "320282") {return (<h1>你正在查看江苏省（{params.slug[0]}）无锡市（{params.slug[1]}）宜兴市（{params.slug[2]}）的地图</h1>  );    }
}

自定义404页面

新建文件“src\app\not-found.tsx”

export default function NotFound() {return <h1>页面未找到</h1>;
}

新建文件“src\app\province[provinceId]\city[cityId]\not-found.tsx”

export default function NotFound() {return <h1>找不到你查找的市的信息</h1>;
}

修改文件“src\app\province[provinceId]\city[cityId]\page.tsx”。表示市级代码在jiangsu中找不到，返回404页面

import { notFound } from "next/navigation";const jiangsu = ["320100", "320200", "320300", "320400", "320500", "320600","320700","320800","320900","321000","321100","321200","321300"];export default function ProvinceDetail({ params } : { params : { provinceId : string; cityId : string}}) {if(params.provinceId === "32" && params.cityId == "320100") {return <h1>江苏省（{params.provinceId}）南京市（{params.cityId}）详情</h1>;}if(params.provinceId === "34" && params.cityId == "341200") {return <h1>安徽省（{params.provinceId}）阜阳市（{params.cityId}）详情</h1>;}if (params.provinceId === "32" && jiangsu.includes(params.cityId)) {return <h1>江苏省南京市有{params.cityId}</h1>;} else {notFound();}return <h1>江苏省南京市和安徽省阜阳市之外的详情</h1>;
}

参考

• Preparing for a Frontend Interview | Course Announcement (youtube.com)
• Docs | Next.js (nextjs.org)