路由到另外一个页面_Nextjs使用解读一（项目搭建与路由系统）

765b5fe1cb993878092e0366d57b05a8.png
文章说明：
1. 之前想搭建个人博客，由于学习的是react技术栈，所以就到处搜罗资料学了nextjs，配合koa就把博客搭起来了。该系列文章基于我的学习笔记，重新整理了一遍，如果有错误之处，还请指正。
2. 个人能力有限，我更注重的是使用，所以对于许多原理也只是简单理解，并未深究。如果是想研究源码，或者追求性能深度优化的老铁，可以不用往下看了
3. 转载请注明出处

各工具版本：npm v6.10，node v12.13，react v16.12，next v9.1

可能需要的预备知识：React项目经验、nodejs开发经验，webpack、npm等常用工具使用经验。最好会koa（部分地方可能会用到）

一、Nextjs与服务端渲染

Nextjs的官方解释：Next.js 是一个轻量级的 React 服务端渲染应用框架。

服务端渲染，顾名思义，就是在服务器上就把网页渲染好了，你请求时，直接发给你渲染好的页面。知道了原理，ssr的优势劣势也就很明显了：

与客户端渲染比较

优势：
1. 更利于SEO，便于搜索引擎收录。因为大多数爬虫只会爬源码，不会爬脚本，当服务端返回渲染好的数据后爬虫便能直接爬取了。
2. 利于首屏加载。这个简单，服务端发过来的就是渲染好的，客户端就省事了，加载也就快了。

劣势就是：1. 服务器的压力大了(多了活要干)；2. 对开发人员要求也高了
（深有体会，量发而行！这已经不属纯正血统的前端范畴了，因为要成功部署的话，你还不得不心甘情愿地去学点服务器知识、Linux运维、nginx部署等）

特别注意

  1. 当服务端渲染时，服务端是没有window、document对象的（浏览器端才有），直接调用会报错。想用这俩对象的话最好放在didAmount周期函数里，等组件挂载后再调用（其实从这一点来说，这只能算是半服务端渲染......扯远了）
  2. 另外，Nextjs自带的服务器专注于处理ssr部分，但后端往往还需要处理文件、连接数据库等功能，此时还需要借助其他的node服务器，我这选用了koa2，然后让nextjs作为koa的一个专门负责ssr的中间件。

二、搭建Nextjs项目

实践出真知。介绍完了，作为正经的程序员，先上手一个再慢慢研究。我们按照官网的节奏，一步步搭建项目，再一步步解释每个文件和目录的作用

1. 搭建环境

  1. 随便创建个项目目录，如：demo
  2. 进入该目录，npm初始化生成package.json：npm init
  3. npm安装nextjs和其依赖：npm install next react react-dom
  4. 之后再修改package.json的scripts模块:
{"scripts": {"dev": "next","build": "next build","start": "next start"}
}

说明：和react项目类似，这里的命令build即部署时的打包命令,start运行打包后的文件命令，dev则是开发环境下启动nextjs服务器。

到这里，环境就算搭建好了。

2. 创建pages目录

Nextjs的路由系统非常简单，所有的路由页面全部存放在pages目录下，nextjs会自动对应page目录的文件路径生成对应路由。

如，我们在pages创建demo.js： 

export default () => <div>This is the demo page</div>

然后启动next服务器：npm run dev
命令行显示如下时表示启动成功了 

D:webdemo>npm run dev> next_test@1.0.0 dev D:webdemo
> next[ wait ]  starting the development server ...
[ info ]  waiting on http://localhost:3000 ...

此时打开浏览器，进入localhost:3000/demo，便能看到页面了

a8bb895d1f5b2b41a482ffab0898264a.png
路由/demo显示界面

3._app.js和 _document.js

特别的，pages下有两个特殊文件：_app.js和_document.js。这两个文件默认是隐藏的，新建的话就会覆盖之前的文件。他们分别用来自定义APP和自定义Document

自定义？什么意思？有什么用？简单来说就是用来定义一些页面共用的属性（如设置全局css,通用布局等），或者定义一些通用的动作（如获取、传递数据等）， 这个结合nextjs的getInitialProps函数会更好说明，就留着后续讲getInitialProps数据获取和页面布局的时候再一并解释吧。

这篇文章我们主要关注路由系统。

三、路由系统

保证pages目录的干净

对于现在的组件化开发，我们通常会有两种组件，一种作为某个独立功能的小组件，一种是作为页面显示的页面组件（通常结合了多个小组件），Nexjs同样适用， 但小组件不能存储在pages目录下，这会导致路由系统混乱。我们可以新建一个components目录（根据自己喜好自定义名字）来存储小组件，在需要时从该目录下import使用即可。

多级路由：
如果路由有多级，直接在pages下创立父级目录，再把最终路由文件放入目录下即可实现多级路由。如在pages目录下创建user目录，user下再创建index.js和home.js，那么路由/user就对应index.js文件，/user/home就对应home.js文件

路由跳转

Nextjs官方推荐了两种跳转方式，一种是Link组件包裹，一种使用Router，我个人是不推荐Link的，原理也是用Router实现的，使用也简单，但用起来总感觉很冗余。我这里主要介绍Router，想了解Link的老铁得麻烦移步官网了。

Nextjs提供了一个'next/router'的包，专门用来处理路由。Router便是其中一个对象，Router.push('url')进行跳转。
实践一下：
1. pages目录下，创建index.js文件

import React from 'react'     
import Router from 'next/router'export default () => {return(<><button onClick={()=>Router.push('/demo')} >送我去demo页</button><div>这里是主页</div></>)
}

2. 修改demo.js文件

import React from 'react'    
import Router from 'next/router'export default () => {return(<><button onClick={()=>Router.push('/')} >送我去主页</button><div>这里是demo页</div></>)
}

3. 运行结果

ef2733a64b18830b3c705bd2e7d92e1a.png

点击“送我去demo页”按钮后

e216e43826da0e16adc367d3b7e65be0.png

路由参数

注意！注意！Nextjs不能使用params传参数!只能通过query!

像这样 

Router.push('url?id=1')
等价
Router.push({pathname:'url',query:{id:1}})

另外，前面说过，服务端渲染时没有window对象的，自然不能通过传统途径获取url参数，这里'next/router'里提供了一个withRouter对象，用它包裹组件后，组件会多出router的参数，通过router就能获取query参数了 

import React from 'react'
import Router,{ withRouter } from 'next/router'const Demo = (props) => {return(<><button onClick={()=>Router.push('/')} >送我去主页</button><div>这里是demo页</div><div>{props.router.query.id}</div></>)
}
export default withRouter(Demo);

df237e7b065f9cd77c9b12897b9750a5.png
成功显示id的值：1

路由映射

我们常看到的url是这样的/url?id=1，而路由映射可以帮我们显示成为这样 /url/1，比较美观友好（其实也就好一点点），这小节讲解下路由映射，会涉及到koa使用，不感兴趣的小伙伴直接跳过吧，毕竟也不是什么特别重要的

"表面上"的实现方法： 

1. Router.push({ pathname: '/demo', query: { id: 1 } },'/demo/1')Router.push的第三个参数即可指定别名
2. Link组件中的as属性<Link href='/demo?id=1' as='/demo/1'>

这样看上去的确可以了，初始时也能访问，但页面一刷新就会404，为什么？因为当我们点击按钮在浏览器端跳转时，是浏览器去找页面，它通过路由映射可以找到。而刷新的时候，是服务器去找，而我们的pages页面里面没有/demo/1的文件，所以就报404了。

解决办法，利用koa处理： 

router.get('/demo/:id',async (ctx)=>{cosnt id = ctx.params.id await handle(ctx.req,ctx.res,{pathname:'/demo',query: {id}}),ctx.respond = false            
})

其实就是在服务器处又将路由转换回来而已。

路由钩子

Router中还定义了几个钩子函数用来获取路由转变时的状态，方便我们在转换路由时进行操作 

// routeChangeStart     history模式路由改变刚开始  
// routeChangeComplete  history模式路由改变结束
// routeChangeError     路由改变失败
// hashChangeStart      hash模式路由改变刚开始
// hashChangeComplete   hash模式路由改变结束Router.events.on(event,func())  //event即监听的事件（以上5种），func回调函数
Router.events.off(event,func()) //取消监听

好了，路由系统就讲解到这了，下一篇文章会讲解到nextjs的布局和getInitialProps()函数，顺带会把这期遗留的_app.js和_document.js一并解释了。
喜欢的话欢迎分享，欢迎讨论

欢迎关注我的其他平台账号： 【知乎】均远 【公众号】佛系前端 【个人博客】http://xujunyuan.com 【GitHub】JunYuanHub

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/453748.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

微信获取token -1000

微信获取token -1000

最终翻看微信开发api找到需要去配置IP白名单。只需要配置访问来源IP即可。 转载于:https://www.cnblogs.com/yangjinqiang/p/8184663.html
阅读更多...
产品技术和管理

产品技术和管理

为啥纯粹为消费者传递体验的活动可以价格不菲&#xff0c;几为暴利&#xff1f;——谈客户体验作为客户价值提升之源 不论产品还是服务&#xff0c;如果能够为消费者传递有益的体验&#xff0c;其价值就可以在一般的产品服务之上得以体现&#xff1b;附加了体验的产品&#xff…
阅读更多...
jquery ztree 设置勾选_047 JAVA-jQuery

jquery ztree 设置勾选_047 JAVA-jQuery

jQuery操作元素属性的值表单:<body><input type"button" name"" id"but1" value"测试获得属性值" /><hr />账号&#xff1a;<input type"text" name"sxtzh" id"zhanghao" value&q…
阅读更多...
Opencv undefined reference to `cv::imread() Ubuntu编译

Opencv undefined reference to `cv::imread() Ubuntu编译

Ubuntu下编译一个C文件&#xff0c;C源程序中使用了opencv&#xff0c;opencv的安装没有问题&#xff0c;但是在编译的过程中出现如下错误&#xff1a; undefined reference to cv::imread(std::string const&, int)undefined reference to cv::noArray()undefined referen…
阅读更多...
深度学习目标检测之 YOLO v1

深度学习目标检测之 YOLO v1

这是继 RCNN&#xff0c;fast-RCNN 和 faster-RCNN 之后&#xff0c;rbg&#xff08;RossGirshick&#xff09;针对DL目标检测速度问题提出的另外一种框架。YOLO V1 增强版本GPU中能跑45fps&#xff0c;简化版本155fps。 论文名&#xff1a; 《You Only Look Once&#xff1a;…
阅读更多...
编程珠玑番外篇

编程珠玑番外篇

1.Plan 9 的八卦 在 Windows 下喜欢用 FTP 的同学抱怨 Linux 下面没有如 LeapFTP 那样的方便的工具. 在苹果下面用惯了 Cyberduck 的同学可能也会抱怨 Linux 下面使用 FTP 和 SFTP 是一件麻烦的事情. 其实一点都不麻烦, 因为在 LINUX 系统上压根就不需要用 FTP. 为什么呢? 因…
阅读更多...
BT下载原理分析

BT下载原理分析

版权声明&#xff1a;本文为博主原创文章&#xff0c;未经博主允许不得转载。 BitTorrent协议。 BT全名为BitTorrent,是一个p2p软件,你在下载download的同时&#xff0c;也在为其他用户提供上传upload&#xff0c;因为大家是“互相帮助”&#xff0c;所以不会随着用户数的增加而…
阅读更多...
表格列求和_excel表格制作,Excel表格的基本操作，包含制作一个表格10方面的知识...

表格列求和_excel表格制作,Excel表格的基本操作，包含制作一个表格10方面的知识...

创建表格&#xff0c;插入与删除一行一列或多行多行&#xff0c;一次移动一行一列或多行多列&#xff0c;拆分与合并单元格&#xff0c;单元格内换行&#xff0c;表格求和与求平均值是Excel表格的基本操作&#xff1b;除此之外&#xff0c;Excel表格的基本操作还包括调整行高列…
阅读更多...
深度学习之 FPN (Feature Pyramid Networks)

深度学习之 FPN (Feature Pyramid Networks)

论文题目&#xff1a;Feature Pyramid Networks for Object Detection论文链接&#xff1a;https://arxiv.org/abs/1612.03144论文代码&#xff1a;Caffe版本 https://github.com/unsky/FPN 《Feature Pyramid Networks for Object Detection》这篇论文主要解决的问题是目标检…
阅读更多...
ISLR—第二章 Statistical Learning

ISLR—第二章 Statistical Learning

Statistical Learning Y 和X的关系why estimate f 用来预测 预测的时候可以将f^当成一个black box来用&#xff0c;目的主要是预测对应x时候的y而不关系它们之间的关系。用来推断 推断的时候&#xff0c;f^不能是一个black box&#xff0c;因为我们想知道predictor和response之…
阅读更多...
提高编程思想

提高编程思想

虚函数和抽象函数有什么区别 虚函数是有代码的并明确允许子类去覆盖&#xff0c;但子类也可不覆盖,就是说可以直接用&#xff0c;不用重写 抽象函数是没有代码&#xff0c;子类继承后一定要重写 ****************************************************************** 在一…
阅读更多...
Windows数据库编程接口简介

Windows数据库编程接口简介

数据库是计算机中一种专门管理数据资源的系统&#xff0c;目前几乎所有软件都需要与数据库打交道&#xff08;包括操作系统&#xff0c;比如Windows上的注册表其实也是一种数据库&#xff09;&#xff0c;有些软件更是以数据库为核心因此掌握数据库系统的使用方法以及数据库系统…
阅读更多...
2019如何转换2010_9102年，你还不知道PPT怎么转换成视频吗？小心落伍了

2019如何转换2010_9102年，你还不知道PPT怎么转换成视频吗？小心落伍了

你在刷抖音的时候有没有刷过这类视频&#xff1a;成为人生赢家必备的书单、5个让你看透人性的电影、6个让你升职加薪的APP...如果你细心观察的话&#xff0c;会发现这类视频的做法基本都是一个样的&#xff0c;像在翻相册一样&#xff0c;一页页过去&#xff0c;所以它们也叫做…
阅读更多...
深度学习之RetinaNet

深度学习之RetinaNet

总述 Focal loss主要是为了解决one-stage目标检测中正负样本比例严重失衡的问题。该损失函数降低了大量简单负样本在训练中所占的权重&#xff0c;也可理解为一种困难样本挖掘。 目标识别有两大经典结构: 第一类是以Faster RCNN为代表的两级识别方法&#xff0c;这种结构的第…
阅读更多...
python的datetime函数_Python连载8-datetime包函数介绍

python的datetime函数_Python连载8-datetime包函数介绍

一、datetime包(上接连载7内容)1.函数&#xff1a;datetime(1)用法&#xff1a;输入一个日期&#xff0c;来返回一个datetime类?(2)格式&#xff1a;datetime.datetime(年&#xff0c;月&#xff0c;日&#xff0c;hour&#xff0c;minute&#xff0c;second)其中hour,minute,…
阅读更多...
深度学习之 soft-NMS

深度学习之 soft-NMS

论文&#xff1a;《Improving Object DetectionWith One Line of Code》soft-NMS 英文论文链接&#xff1a;https://arxiv.org/pdf/1704.04503.pdfsoft-NMS github 链接&#xff1a;https://github.com/bharatsingh430/soft-nms 绝大部分目标检测方法&#xff0c;最后都要用到…
阅读更多...
一维二维_Excel二维数据转一维，2种方法轻松搞定

一维二维_Excel二维数据转一维，2种方法轻松搞定

今天是2020年1月1日&#xff0c;祝各位小伙伴们新年快乐&#xff0c;开心每一天~如下所示&#xff0c;左边是二维交叉数据表&#xff0c;我们希望快速转换成右边的一维数据表如果复制粘贴&#xff0c;效率太低了&#xff0c;今天分享两种方法&#xff0c;实现快速转换1、powerq…
阅读更多...
深度学习之 Cascade R-CNN

深度学习之 Cascade R-CNN

Zhaowei Cai, Nuno Vasconcelos. 《Cascade R-CNN: Delving into High Quality Object Detection》. CVPR 2018.论文链接&#xff1a;https://arxiv.org/abs/1712.00726代码链接&#xff1a;https://github.com/zhaoweicai/cascade-rcnn 前言 IOU阈值被用来定义正负例&#x…
阅读更多...
转换文档参数_明明2秒可以搞定Word、Excel相互转换，你却用了半小时！真亏了...

转换文档参数_明明2秒可以搞定Word、Excel相互转换，你却用了半小时！真亏了...

我们在用office三件套工作的时候&#xff0c;经常都需要对文件的格式进行转换&#xff0c;像是Word文档和Excel表格的转换&#xff0c;很多小伙伴都要花上半个小时甚至以上的时间才能搞定&#xff0c;效率实在不行。别担心&#xff0c;今天小编将分享能快速完成Word、Excel转换…
阅读更多...
深度学习之 DCN（Deformable Convolution）-可变形卷积

深度学习之 DCN（Deformable Convolution）-可变形卷积

Paper link: http://openaccess.thecvf.com/content_ICCV_2017/papers/Dai_Deformable_Convolutional_Networks_ICCV_2017_paper.pdfhttps://arxiv.org/pdf/1703.06211 Code link: https://github.com/msracver/Deformable-ConvNets Abstract 如何有效地对几何图形的变化进行…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023