首页 > 其他分享 >Next.js 中动态路由的使用

Next.js 中动态路由的使用

时间:2024-10-10 11:48:21浏览次数:8  
标签:const users Next router js id 路由 页面

什么是动态路由?

动态路由指的是 URL 中的某些部分不是固定的,而是可以动态变化的。比如,你有一个用户详情页面,可能每个用户的 URL 都是 http://example.com/users/123,其中 123 是用户的 ID。通过动态路由,我们可以捕获这个 ID 并展示对应的用户信息。

一、创建动态路由文件

在 Next.js 中,动态路由的核心是方括号表示法。我们通过在 pages 目录下创建以方括号包裹的文件来定义动态路由。

例如,我们要为用户创建一个详情页面,路径形如 /users/[id].js,其中 [id] 是用户的唯一标识符。

1. 创建 users 文件夹

pages 目录下创建一个 users 文件夹:

/pages/users/[id].js
2. 编写动态路由页面

我们可以通过 useRouter 钩子获取 URL 中的动态参数。在这个例子中,我们将根据 id 展示不同的用户详情。

// pages/users/[id].js
import { useRouter } from 'next/router';

const UserDetails = () => {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      <h1>User Details</h1>
      <p>Displaying details for user ID: {id}</p>
    </div>
  );
};

export default UserDetails;

在这个页面中,router.query.id 代表 URL 中的 id 参数。我们可以通过它来显示不同用户的详情。

3. 访问动态页面

启动开发服务器后,访问 http://localhost:3000/users/123,页面将会显示:

Displaying details for user ID: 123
二、基于动态参数获取数据

通常,动态路由不仅仅是显示动态参数,还需要根据这些参数获取数据。比如,在用户详情页,我们可能需要根据用户 ID 从数据库或 API 获取用户的详细信息。

在 Next.js 中,我们可以使用 getServerSidePropsgetStaticProps 来预获取数据。以下是一个使用 getServerSideProps 获取用户数据的示例:

// pages/users/[id].js
import { useRouter } from 'next/router';

const UserDetails = ({ user }) => {
  const router = useRouter();

  // 如果页面还在加载,返回加载中的提示
  if (router.isFallback) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>{user.name}</h1>
      <p>Email: {user.email}</p>
    </div>
  );
};

export async function getServerSideProps(context) {
  const { id } = context.params;

  // 模拟 API 请求
  const res = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
  const user = await res.json();

  // 如果用户不存在,返回 404 页面
  if (!user) {
    return {
      notFound: true,
    };
  }

  return {
    props: { user },
  };
}

export default UserDetails;
解释:
  1. getServerSideProps: 我们使用 getServerSideProps 来根据用户 ID 获取数据。每次请求页面时,Next.js 都会在服务器端运行此函数,并将返回的数据作为 props 传递给组件。
  2. context.params: context.params 包含动态路由参数,也就是 URL 中的 id
  3. API 请求: 我们模拟了一个 API 请求来获取用户数据。
访问页面

访问 http://localhost:3000/users/1,页面将展示对应用户的详细信息:

Name: Leanne Graham
Email: [email protected]
  1. 编写订单页面逻辑:
    import { useRouter } from 'next/router';
    
    const UserOrders = () => {
      const router = useRouter();
      const { id } = router.query;
    
      return (
        <div>
          <h1>Orders for User {id}</h1>
          {/* 这里可以展示订单列表 */}
        </div>
      );
    };
    
    export default UserOrders;
    
    访问嵌套路由页面

    访问 http://localhost:3000/users/1/orders,页面将显示:

Orders for User 1

 

 

 原文:https://juejin.cn/post/7423261843933282342

标签:const,users,Next,router,js,id,路由,页面
From: https://blog.csdn.net/gaotlantis/article/details/142766790

相关文章

  • 鸿蒙NEXT开发-沉浸式导航和键盘避让模式(基于最新api12稳定版)
    注意:博主有个鸿蒙专栏,里面从上到下有关于鸿蒙next的教学文档,大家感兴趣可以学习下如果大家觉得博主文章写的好的话,可以点下关注,博主会一直更新鸿蒙next相关知识专栏地址:https://blog.csdn.net/qq_56760790/category_12794123.html目录1.沉浸式导航1.1基本介绍1.2如......
  • C# Json操作
    usingNewtonsoft.Json;usingNewtonsoft.Json.Linq;usingSystem;usingSystem.Collections.Generic;usingSystem.IO;usingSystem.Linq;usingSystem.Runtime.Serialization.Json;usingSystem.Text;usingSystem.Web.Script.Serialization;namespaceHS.Common.......
  • JS高级-ES6之类与继承实现
    在本章节中,我们会通过class类的继承做法extends来实现继承,相对于过往在原型链章节所学的各种继承方式,便利程度有着飞跃性的提升类继承的关键因素super关键词是如何使用的?Babel工具是如何将ES6的类继承转为ES5的旧写法?阅读这类转化过的源码,我们需要注意哪些技巧?在该篇章中,都......
  • 基于SpringBoot+MySQL+SSM+Vue.js的电影票信息管理系统(附论文)
    获取见最下方名片获取见最下方名片获取见最下方名片演示视频基于SpringBoot+MySQL+SSM+Vue.js的电影票信息管理系统(附论文)技术描述开发工具:Idea/Eclipse数据库:MySQLJar包仓库:Maven前端框架:Vue/ElementUI后端框架:Spring+SpringMVC+Mybatis+SpringBoot......
  • 基于SpringBoot+MySQL+SSM+Vue.js的二手家电管理系统(附论文)
    获取见最下方名片获取见最下方名片获取见最下方名片演示视频基于SpringBoot+MySQL+SSM+Vue.js的二手家电管理系统(附论文)技术描述开发工具:Idea/Eclipse数据库:MySQLJar包仓库:Maven前端框架:Vue/ElementUI后端框架:Spring+SpringMVC+Mybatis+SpringBoot文......
  • JS高级-ES6之模板字符串与剩余参数
    在本章节中,我们学习新的字符串拼接方式:标签模板字符串,动态效果与自由使用程度得到进一步提升函数的默认参数更好的解决方案,以及结合解构的进阶使用方式剩余参数的进一步说明,箭头函数的补充,以及展开语法对数据的处理细节是怎么样的,深拷贝还是浅拷贝,都会得到说明一、字符......
  • HarmonyOS NEXT 开发之ArkTS基础入门
    ArkTS是HarmonyOSNEXT的开发语言,它基于TypeScript并进行了扩展和优化。以下是一些基础语法知识点、示例用法及注意事项。一、ArkTS简介ArkTS是一种基于TypeScript的编程语言,主要用于HarmonyOS应用的UI界面和业务逻辑开发。它在TypeScript的基础上,进行了一些针对......
  • 2024-10-10 js 深拷贝常用方法
    1、json序列化以及反序列化leta=JSON.parse(JSON.stringify(b))2、使用lodash库插件没有的话先安装:npmilodash使用方式:import{cloneDeep}from'lodash';leta=cloneDeep(b);ps:我当前使用的版本是@4为什么要使用深拷贝?因为我们在开发中会经常进行赋值......
  • 【D3.js in Action 3 精译_032】第四章 D3 直线、曲线与弧线的绘制 + 4.1 坐标轴的创
    当前内容所在位置(可进入专栏查看其他译好的章节内容)第一部分D3.js基础知识第一章D3.js简介(已完结)1.1何为D3.js?1.2D3生态系统——入门须知1.3数据可视化最佳实践(上)1.3数据可视化最佳实践(下)1.4本章小结第二章DOM的操作方法(已完结)2.1第一......
  • 【JS】判断有效的字母异位词
    步骤长度比较:首先检查两个字符串的长度是否相等。如果长度不相等,则直接返回false,因为变位词的定义要求两个字符串必须包含相同数量的字符。创建字符计数映射:使用一个Map对象来存储第一个字符串中每个字符的出现次数。Map的键是字符,值是该字符出现的次数。统计第一个......