我要投稿

如何在 Nextjs 14 中进行应用程序路由

资讯主编 web前端

2024-08-07 0 973

next.JS 14 继续增强其强大的框架，为开发人员提供构建 react 应用程序的强大功能。任何 Web 应用程序的关键方面之一都是路由，而 next.js 使其变得异常简单和高效。在这篇文章中，我们将探讨如何在 next.js 14 中设置和使用应用程序路由。

next.js 路由简介

next.js 使用基于文件的路由系统，这意味着页面目录的结构决定了应用程序的路由。页面目录中的每个文件都成为一条路线。

基本路由

要创建基本路由，您只需将新文件添加到pages目录即可。例如，如果您在pages目录中创建一个名为about.js的文件，它将自动在/about.

处可用

示例：

// pages/about.js
export default function about() {
  return (
    <div>
      <h1>about us</h1>
      <p>this is the about page.</p>
    </div>
  );
}

动态路由

next.js 还支持使用括号（[]）的动态路由。这允许您使用动态参数创建路线。

示例：

// pages/product/[id].js
import { userouter } from 'next/router';

export default function product() {
  const router = userouter();
  const { id } = router.query;

  return (
    <div>
      <h1>product {id}</h1>
    </div>
  );
}

在此示例中，pages/product 目录中名为 [id].js 的文件创建了一个动态路由，可以通过 /product/1、/product/2 等访问。

嵌套路由

可以通过在页面目录中添加文件夹来创建嵌套路由。每个文件夹代表 url 路径的一部分。

示例：

// pages/blog/index.js
export default function blog() {
  return (
    <div>
      <h1>blog home</h1>
    </div>
  );
}

// pages/blog/[slug].js
import { userouter } from 'next/router';

export default function blogpost() {
  const router = userouter();
  const { slug } = router.query;

  return (
    <div>
      <h1>blog post: {slug}</h1>
    </div>
  );
}

在此设置中，/blog 路由将渲染index.js，/blog/[slug] 将渲染[slug].js。

API 路由

next.js 还支持 api 路由，允许您在应用程序中创建后端端点。这些都放在pages/api目录下。

示例：

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).JSON({ message: 'hello world' });
}

此文件在 /api/hello 处创建一个 api 端点，该端点以 json 消息进行响应。

自定义路由器

next.js 14 允许使用 next/router 包进行更多自定义和高级路由策略。您可以以编程方式在页面之间导航并处理更复杂的路由场景。

示例：

import { useRouter } from 'next/router';

export default function Home() {
  const router = useRouter();

  const navigateToAbout = () =&gt; {
    router.push('/about');
  };

  return (
    <div>
      <h1>Home Page</h1>
      <button onclick="{navigateToAbout}">Go to About Page</button>
    </div>
  );
}

结论

next.js 14 以其强大而灵活的路由系统继续简化和增强开发人员体验。无论您需要静态、动态还是嵌套路由，next.js 都可以轻松设置和管理应用程序的导航。

收藏 (0) 打赏

感谢您的支持，我会继续努力的!

打开微信/支付宝扫一扫，即可进行扫码打赏哦，分享从这里开始，精彩与您同在

免责声明
1. 本站所有资源来源于用户上传和网络等，如有侵权请邮件联系本站整改team@lcwl.fun！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系本站工作人员处理！
6. 本站资源售价或VIP只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压，如遇到无法解压的请联系管理员！
8. 因人力时间成本问题，部分源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别！
9.本站所有源码资源都是经过本站工作人员人工亲测可搭建的，保证每个源码都可以正常搭建，但不保证源码内功能都完全可用，源码属于可复制的产品，无任何理由退款！

网站搭建学习网 web前端如何在 Nextjs 14 中进行应用程序路由 https://www.xuezuoweb.com/9827.html