刘文柱

# next-页面跳转

# 逻辑跳转

import Router from "next/router"

import { Button } from "antd"
import Router from "next/router"

const Index = ({ count, dispatch }) => {
    function gotoB() {
        Router.push({
            pathname: "/b",
            query: {
                id: 2
            }
        })
    }

    return <div>
        <Button onClick={gotoB}>go b</Button>
    </div>
}

export default Index
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

可以在事件代码中进行逻辑跳转

# 链接跳转（推荐 seo友好）

import Link from "next/link"

const A = ({ router, name, time }) => {
    return <div>
       
        <Link href="#aaa">
            <a>a page</a>
        </Link>
       
    </div>
}

export default A
1
2
3
4
5
6
7
8
9
10
11
12
13

Link不会进行渲染的，必须包含一个组件

# 获取router对象

import { withRouter } from "next/router"

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

const A = ({ router }) => {
    return <div>
       
        <Link href="#aaa">
            <a>a page {router.query.id}</a>
        </Link>
       
    </div>
}

export default withRouter(A)
1
2
3
4
5
6
7
8
9
10
11
12
13
14

可以获取路由上的参数等。

# 路由事件


const events = [
    "routeChangeStart",
    "routeChangeComplete",
    "routeChangeError",
    "beforeHistoryChange",
    "hashChangeStart",
    "hashChangeComplete"
]

function makeEvent(type) {
    return (...args) => {
        console.log(type, ...args)
    }
}

events.forEach(event => {
    Router.events.on(event, makeEvent(event))
})

const Index = ({ count, dispatch }) => {
    return <div>
        
    </div>
}
export default Index
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
  • "routeChangeStart",
  • "routeChangeComplete",
  • "routeChangeError",
  • "beforeHistoryChange",
  • "hashChangeStart",
  • "hashChangeComplete"

路由的事件经常会在全局loading中用到

← next-动态路由 →