当前位置: 首页> 教育> 锐评 > Next.js(React应用开发框架)实战——路由(一)

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

时间:2025/7/11 0:38:47来源:https://blog.csdn.net/mengningyun6826/article/details/139400822 浏览次数:0次

说明:

  • 完整代码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)
关键字:Next.js(React应用开发框架)实战——路由(一)

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: