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

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

标签式导航<Link>

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

import Link from 'next/link'

然后新建两个页面mybjA.jsmybjB.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演示:

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

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

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P03:Next.js教程-路由基础和基本跳转

发表评论

提供最优质的资源集合

立即查看 了解详情