React服务端渲染框架Next.js入门之旅三：路由跳转和参数传递

不带参数，静态路由；带参数，根据参数不同显示不同内容，动态路由。

一、路由跳转

标签式跳转

在pages下新建juanA.js以及juanB.js作为两个跳转页面。

juanA.js：

import Link from 'next/link'
export default ()=>(
    <>
        <div>juanA page</div>
        {/* 文档中规定必须放a标签,Link下只能有一个父级标签，即多个标签要用一个a标签包裹起来 */}
        <Link href='/'>
            <a>返回首页</a>
        </Link>
    </>
)

juanB.js：

import Link from 'next/link'
export default ()=>(
    <>
        <div>juanB page</div>
        {/* 必须放a标签 */}
        <Link href='/'><a>返回首页</a></Link>
    </>
)

修改index.js：

import React from 'react'
import Link from 'next/link'

const Home = ()=>(//圆括号表示只有返回值没有业务逻辑，有业务逻辑用大括号
    <>
        <div>我是首页</div>
        <div><Link href="/juanA"><a>去juanA页面</a></Link></div>
        <div><Link href="/juanB"><a>去juanB页面</a></Link></div>
    </>
)

export default Home

效果如下：

编程式跳转

复用性更强。
在index.js中引入router：

import Router from 'next/router'

在index.js中增加一个按钮，点击跳转到juanA页面（增加了业务逻辑goToA方法，注意修改为大括号）：

const Home = () => {//圆括号表示只有返回值没有业务逻辑，有业务逻辑用大括号
    function goToA(){
        Router.push('/juanA')
    }

    return (
        <>
            <div>我是首页</div>
            <div><Link href="/juanA"><a>去juanA页面</a></Link></div>
            <div><Link href="/juanB"><a>去juanB页面</a></Link></div>
            <div>
                <button onClick={goToA}>juanA</button>
            </div>
        </>
    )
}

效果如下：

二、参数传递

Next.js框架只能用query传递参数，比如?id=1。

标签形式

传递参数

修改index.js文件：

import React from 'react'
import Link from 'next/link'

const Home = () => {//圆括号表示只有返回值没有业务逻辑，有业务逻辑用大括号

    return (
        <>
            <div>我是首页</div>
            <div>
                <Link href="/sport?name=篮球"><a>选择篮球</a></Link>
                <br/>
                <Link href="/sport?name=羽毛球"><a>选择羽毛球</a></Link>
            </div>
        </>
    )
}

export default Home

接收参数

在pages下新建sport.js文件：

import {withRouter} from 'next/router'
import Link from 'next/link'

// 只有使用withRouter才能有router的值
const Sport = ({router})=>{
    return (
        <>
            <div>{router.query.name}是我最喜欢的运动</div>
            <Link href="/"><a>返回首页</a></Link>
        </>
    )
}
export default withRouter(Sport)

效果如下：

编程形式

引入router：

import Router from 'next/router'

新增一个按钮跳转到sport页面，并编写方法传递参数，这里传递的是一个对象（也可以用带?的简单字符串）：

import React from 'react'
import Link from 'next/link'
import Router from 'next/router'

const Home = () => {//圆括号表示只有返回值没有业务逻辑，有业务逻辑用大括号

    function gotoSport(){
        Router.push({
            pathname:'/sport',
            query:{name:'篮球'}
        })
        // 同以下：
        // Router.push('/sport?篮球')
    }

    return (
        <>
            <div>我是首页</div>
            <div>
                <Link href="/sport?name=篮球"><a>选择篮球</a></Link>
                <br/>
                <Link href="/sport?name=羽毛球"><a>选择羽毛球</a></Link>
            </div>
            <div>
                <button onClick={gotoSport}>选篮球</button>
            </div>
        </>
    )
}

export default Home

实现效果：

那么Link标签的形式能不能传递对象呢？当然可以。

修改篮球的Link跳转如下：

<Link href={{pathname:'/sport',query:{name:'篮球'}}}><a>选择篮球</a></Link>

运行项目，跳转成功。