P03：路由基础和基本跳转

Posted 2022-01-08 wgchen~

Next.js 教程

• 阐述
• 标签式导航 ``
• Router模块进行跳转

阐述

学完如何编写组件和页面后，下一步应该了解的就是路由体系，每个框架都有着不同的路由体系，本文先学习最基础的页面如何跳转。

页面跳转一般有两种形式：
第一种是利用标签 <Link>
第二种是用 js 编程的方式进行跳转，也就是利用 Router 组件。

标签式导航 <Link>

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

next-create\\pages\\index.js

import Link from 'next/link'

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

next-create\\pages\\willemA.js

import Link from 'next/link'

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

next-create\\pages\\willemB.js

import Link from 'next/link'

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

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

next-create\\pages\\index.js

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

const Home = () => (
  <>
    <div>我是首页</div>
    <div><Link href="/willemA"><a>去willemA页面</a></Link></div>
    <div><Link href="/willemB"><a>去willemB页面</a></Link></div>

  </>
)

export default Home

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

如果这样写会直接报错

 <div>
   <Link href="/willem">
     <span>去willemA页面</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="/willemA">
  <a>
    <span>去willemA页面</span>
    <span>前端博客</span>
  </a>
</Link>

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

Router模块进行跳转

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

import Router from 'next/router'

直接使用Router进行跳转就可以了。

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

代码如下：next-create\\pages\\index.js

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

const Home = () => (
  <>
    <div>我是首页</div>
    <div><Link href="/willemA"><a>去willemA页面</a></Link></div>
    <div><Link href="/willemB"><a>去willemB页面</a></Link></div>

    <hr />

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

    <div>
        <button onClick=()=>Router.push('/willemA')>去willemA页面</button>
    </div>
    

  </>
)

export default Home

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

next-create\\pages\\index.js

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

const Home = () => 

  function gotoA()
    Router.push('/willemA')
  

  return(
    <>
      <div>我是首页</div>

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

      <div><Link href="/willemB"><a>去willemB页面</a></Link></div>

      <div>
        <button onClick=gotoA>去willemA页面</button>
      </div>

    </>
  )



export default Home

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