P04:路由跳转时用query传递和接受参数
Posted wgchen~
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了P04:路由跳转时用query传递和接受参数相关的知识,希望对你有一定的参考价值。
Next.js 教程
阐述
项目开发中一般都不是简单的静态跳转,而是需要动态跳转的。
动态跳转就是跳转时需要带一个参数或几个参数过去,然后在到达的页面接受这个传递的参数,并根据参数不同显示不同的内容。
比如新闻列表,然后点击一个要看的新闻就会跳转到具体内容。
类似这样的需求都是通过传递参数实现的。
只能用query传递参数
接下来通过一个小例子来通俗易懂的讲解一下路由带参数的知识。
在 Next.js
中只能通过通过 query(?id=1)
来传递参数,而不能通过 (path:id)
的形式传递参数,这个一定要记住,在工作中很容易就容易记混。
现在我们改写一下 pages
文件夹下的 index.js
文件。
next-create\\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
页面,
并写下下面的代码:
next-create\\pages\\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-create\\pages\\index.js
import React from 'react'
import Link from 'next/link'
import Router from 'next/router'
const Home = () =>
function gotoJavascript()
Router.push(
pathname: '/javascript',
query:
name: 'react教程 gotoJavascript'
)
return (
<>
<div>我是首页</div>
<div>
<Link href="/javascript?name=react教程"><a>react教程</a></Link><br/>
<Link href="/javascript?name=node教程"><a>node教程</a></Link>
</div>
<div>
<button onClick=gotoJavascript>去 javascript 页面</button>
</div>
</>
)
export default Home
以上是关于P04:路由跳转时用query传递和接受参数的主要内容,如果未能解决你的问题,请参考以下文章
VUE学习--路由跳转方式||路由跳转携带参数方式||目标路由接受参数方式
采用react-router,当点击页面跳转时,怎样相应的改变header值