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

向右看齐 2023-10-06 21:01 8阅读 0赞

#### Next.js 教程 ####

*  阐述
 *  只能用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 (
        <>
          <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 框架的高级组件，用来处理路由用的，这里先学简单用法，以后还会学习的。通过这种方式就获得了参数，并显示在页面上了。  
![在这里插入图片描述][09c3c00558be4fb594bf1d0f13a167c2.gif_pic_center]

## 编程式跳转传递参数 ##

学会了 `<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

[09c3c00558be4fb594bf1d0f13a167c2.gif_pic_center]: https://img-blog.csdnimg.cn/09c3c00558be4fb594bf1d0f13a167c2.gif#pic_center