P04：路由跳转时用query传递和接受参数

阐述

项目开发中一般都不是简单的静态跳转，而是需要动态跳转的。

动态跳转就是跳转时需要带一个参数或几个参数过去，然后在到达的页面接受这个传递的参数，并根据参数不同显示不同的内容。

比如新闻列表，然后点击一个要看的新闻就会跳转到具体内容。

类似这样的需求都是通过传递参数实现的。

只能用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 (
    
      我是首页
      
        react教程
        node教程
      
    
  )
}

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 (
        
            {router.query.name},实战课程上新了 .
            返回首页
        
    )
}

export default withRouter(Javascript)

withRouter 是 Next.js 框架的高级组件，用来处理路由用的，这里先学简单用法，以后还会学习的。通过这种方式就获得了参数，并显示在页面上了。

编程式跳转传递参数

学会了 这种标签式跳转传递参数的形式，那编程式跳转如何传递呢？ 其实也可以简单使用 ? 加参数的形式， 代码如下：

function gotoJavascript(){
  Router.push('/javascript?name=react教程')
}

这种形式跳转和传递参数是完全没有问题的，但是不太优雅，所以也可以写成Object的形式。

function gotoJavascript(){

  Router.push({
    pathname: '/javascript',
    query:{
      name: 'react教程'
    }
  })
  
}

嗯，这样写确实优雅很多(我们一定要面向对象编程，有对象比没对象要好)。

其实 标签也可以写成这种形式，比如我们把第一个修改成这种形式.

	react教程

在浏览器中预览一下，如果一切正常是可以顺利进行跳转，并接收到传递的值。

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 (
    
      我是首页
      
        react教程
        node教程
      

      
      去 javascript 页面
      
    
  )
}

export default Home