P03：Next.js教程-路由基础和基本跳转

学完如何编写组件和页面后，下一步应该了解的就是路由体系，每个框架都有着不同的路由体系，本文先学习最基础的页面如何跳转。页面跳转一般有两种形式，第一种是利用标签<Link>,第二种是用 js 编程的方式进行跳转，也就是利用Router组件。先来看一下标签的形式如何跳转。

标签式导航<Link>

在编写代码之前，先删除index.js中的代码，保证代码的最小化。使用标签式导航需要先进行引入，代码如下:

import Link from 'next/link'

然后新建两个页面mybjA.js和mybjB.js，新建后写个最简单的页面，能标识出来 A、B 两个页面就好。

//mybjA.js
import Link from 'next/link'

export default () => (
    <>
        <div>Mybj-a page .</div>
        <Link href='/'><a>返回首页</a></Link>
    </>
)

写完 A 页面后，可以直接复制 A 页面的内容，然后修改一下就是 B 页面。

//mybjB.js
import Link from 'next/link'

export default () => (
    <>
        <div>Mybj-b page .</div>
        <Link href='/'><a>返回首页</a></Link>
    </>
)

有了两个页面后，可以编写首页的代码，实现跳转了。

//index.js
import React from 'react'
import Link from 'next/link'


const Home = () => (
  <>
    <div>我是首页</div>
    <div><Link href="/mybjA"><a>去 MybjA 页面</a></Link></div>
    <div><Link href="/mybjB"><a>去 MybjB 页面</a></Link></div>

  </>
)

export default Home

FIF 演示：

用<Link>标签进行跳转是非常容易的，但是有一个小坑需要你注意一下，就是他不支持兄弟标签并列的情况。

<div>
  <Link href="/jspangA">
    <span>去 MybjA 页面</span>
    <span>前端博客</span>
  </Link>
</div>

如果这样写会直接报错，报错信息如下:

client pings, but there's no entry for page: /_error
Warning: You're using a string directly inside <Link>. This usage has been deprecated. Please add an <a> tag as child of <Link>

但是你可以把这两个标签外边套一个父标签，就可以了，比如下面的代码就没有错误。

<Link href="/mybjA">
  <a>
    <span>去 MybjA 页面</span>
    <span>前端博客</span>
  </a>
</Link>

通过标签跳转非常的简单，跟使用<a>标签几乎一样。那再来看看如何用编程的方式进行跳转。

Router 模块进行跳转

在Next框架中还可以使用 Router 模块进行编程式的跳转，使用前也需要我们引入Router，代码如下：

import Router from 'next/router'

然后在Index.js页面中加入，直接使用 Router 进行跳转就可以了。

<div>
    <button onClick={()=>{Router.push('/mybjA')}}>去 MybjA 页面</button>
</div>

这样写只是简单，但是还是耦合性太高，跟 Link 标签没什么区别，你可以修改一下代码，把跳转放到一个方法里，然后调用方法。

import React from 'react'
import Link from 'next/link'
import Router from 'next/router'
const Home = () => {
  function gotoA(){
    Router.push('/mybjA')
  }
  return(
    <>
      <div>我是首页</div>
      <div>
        <Link href="/mybjA">
          <a>
            <span>去 MybjA 页面</span>
            <span>前端博客</span>
          </a>
        </Link>
      </div>
      <div><Link href="/mybjB"><a>去 MybjB 页面</a></Link></div>
      <div>
        <button onClick={gotoA}>去 MybjA 页面</button>
      </div>
    </>
  )

}
export default Home

这样也是可以实现跳转的，而且耦合性也降低了,所以个人更喜欢这种跳转方式。

总结

本文主要学习了 Next 的两种跳转方式，第一种是标签式跳转，第二种是编程式跳转。