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 的两种跳转方式，第一种是标签式跳转，第二种是编程式跳转。

以上关于P03：Next.js教程-路由基础和基本跳转的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。