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框架的高级组件,用来处理路由用的,这里先学简单用法,以后还会学习的。通过这种方式就获得了参数,并显示在页面上了。

用query传递参数

编程式跳转传递参数

学会了<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进行接收。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P04:Next.js教程-路由跳转时用query传递和接受参数

发表评论

提供最优质的资源集合

立即查看 了解详情