P04:Next.js教程-路由跳转时用query传递和接受参数
目录
项目开发中一般都不是简单的静态跳转,而是需要动态跳转的。动态跳转就是跳转时需要带一个参数或几个参数过去,然后在到达的页面接受这个传递的参数,并根据参数不同显示不同的内容。比如新闻列表,然后点击一个要看的新闻就会跳转到具体内容。这些类似这样的需求都都是通过传递参数实现的。
只能用 query 传递参数
接下来通过一个小例子来通俗易懂的讲解一下路由带参数的知识。在Next.js
中只能通过通过 query(?id=1
)来传递参数,而不能通过(path:id
)的形式传递参数,这个一定要记住,在工作中很容易就容易记混。
现在我们改写一下 pages 文件夹下的index.js
文件。
import React from 'react' import Link from 'next/link' import Router from 'next/router' const Home = () => { return ( <> <div>我是首页</div> <div> <Link href="/javascript?name=react 教程"><a>react 教程</a></Link><br/> <Link href="/javascript?name=node 教程"><a>node 教程</a></Link> </div> </> ) } export default Home
接收传递过来的参数
现在还没有 JavaScript 对应的页面,所以我们要创建javascript.js
页面,并写下下面的代码。
import { withRouter} from 'next/router' import Link from 'next/link' const Javascript = ({router})=>{ return ( <> <div>{router.query.name},实战课程上新了 .</div> <Link href="/"><a>返回首页</a></Link> </> ) } export default withRouter(Javascript)
withRouter
是 Next.js 框架的高级组件,用来处理路由用的,这里先学简单用法,以后还会学习的。通过这种方式就获得了参数,并显示在页面上了。
编程式跳转传递参数
学会了<Link>
这种标签式跳转传递参数的形式,那编程式跳转如何传递呢?其实也可以简单使用?加参数
的形式,代码如下:
function gotoJavascript(){ Router.push('/javascript?name=react 教程') }
这种形式跳转和传递参数是完全没有问题的,但是不太优雅,所以也可以写成Object
的形式。
function gotoJavascript(){ Router.push({ pathname: '/javascript', query:{ name: 'react 教程' } }) }
嗯,这样写确实优雅很多(我们一定要面向对象编程,有对象比没对象要好)。
其实<Link>
标签也可以写成这种形式,比如我们把第一个修改成这种形式.
<Link href={{pathname:'/javascript',query:{name:'react 教程'}}}><a>react 教程</a></Link>
在浏览器中预览一下,如果一切正常是可以顺利进行跳转,并接收到传递的值。
总结
本文主要讲解了 Next 框架的路由跳转时带参数过去,然后用withRouter
进行接收。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » P04:Next.js教程-路由跳转时用query传递和接受参数
码云笔记 » P04:Next.js教程-路由跳转时用query传递和接受参数