P03：路由基础和基本跳转

Bertha 。 2023-10-06 21:01 12阅读 0赞

#### 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

![在这里插入图片描述][a50a62f8f68942e99dbb0e870fe07bf5.gif_pic_center]

用 `<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>

![在这里插入图片描述][7e45eefc84a641899b696609f089af96.png]  
通过标签跳转非常的简单，跟使用 `<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

![在这里插入图片描述][3fa3480163a344f29439a3546d4e77aa.gif_pic_center]  
这样写只是简单，但是还是耦合性太高，跟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

![在这里插入图片描述][ccc5d3a46e3b477e8cf60ecd5dc871c9.png]

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

[a50a62f8f68942e99dbb0e870fe07bf5.gif_pic_center]: https://img-blog.csdnimg.cn/a50a62f8f68942e99dbb0e870fe07bf5.gif#pic_center
[7e45eefc84a641899b696609f089af96.png]: https://img-blog.csdnimg.cn/7e45eefc84a641899b696609f089af96.png
[3fa3480163a344f29439a3546d4e77aa.gif_pic_center]: https://img-blog.csdnimg.cn/3fa3480163a344f29439a3546d4e77aa.gif#pic_center
[ccc5d3a46e3b477e8cf60ecd5dc871c9.png]: https://img-blog.csdnimg.cn/ccc5d3a46e3b477e8cf60ecd5dc871c9.png

发表评论取消回复

表情：

评论列表（有 0 条评论，12人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue 路由跳转

文章目录前言路由基础子路由路由传参 query 传参 path 静态传参动态传参

我就是我/ 2023年10月13日 10:39/ 0 赞/ 43 阅读

相关 P03：路由基础和基本跳转

Next.js 教程阐述标签式导航 \`\` Router模块进行跳转阐述学完如何编写组件和页面后，下一步应该了解的就是路由体系，每个框

Bertha 。/ 2023年10月06日 21:01/ 0 赞/ 13 阅读

相关 16Flutter中的路由基本路由基本路由跳转传值(上)

/\ Flutter中的普通路由、普通路由传值、命名路由、命名路由传值 Flutter中的路由通俗的讲就是页面跳转。在Flutter中通过Navigator组件管理路由导航

た入场券/ 2023年08月17日 15:58/ 0 赞/ 152 阅读

相关 vue-03-路由-二三级路由跳转

1、新建项目之后，在 components 文件夹下，新建 about 文件夹 2、引入二级路由，同样的是在main.js 文件下引入，这四个组件都是在 components

╰+攻爆jí腚メ/ 2023年07月20日 10:35/ 0 赞/ 31 阅读

相关 vue-03-路由-路由跳转的方式

1、第一种就是我们很熟悉的直接在 router-link 里面 to 属性后接路径，或者是通过路由 name 属性绑定 <li> <router-lin

朴灿烈づ我的快乐病毒、/ 2023年07月20日 10:34/ 0 赞/ 42 阅读

相关 Vue 路由及路由跳转

让根组件自动的挂载其它组件，而不是手动挂载。 1. 安装： > cnpm install vue-router --save 1. 在main.js中引入并使用v

朴灿烈づ我的快乐病毒、/ 2022年12月22日 14:29/ 0 赞/ 295 阅读

相关前端路由跳转基本原理

转[前端路由跳转基本原理][Link 1] 目前前端三杰 Angular、React、Vue 都推介单页面应用 SPA 开发模式，在路由切换时替换 DOM Tree 中最

怼烎@/ 2022年03月16日 16:14/ 0 赞/ 254 阅读

相关【Vue】路由跳转

[【Vue】路由跳转][Vue] 路由跳转有几种方式，我用的最多的是$router.push的方法：实践：例如下面的页面，要求点详情跳转到详情页。 ![在这里

悠悠/ 2021年12月17日 18:30/ 0 赞/ 531 阅读

相关【Vue】路由跳转

路由跳转有几种方式，我用的最多的是$router.push的方法：实践：例如下面的页面，要求点详情跳转到详情页。 ![在这里插入图片描述][watermark_

清疚/ 2021年12月15日 06:55/ 0 赞/ 501 阅读

相关 Vue路由跳转+路由传参

之前在原生JS的开发中，我们经常会用到根据某一状态进行页面的跳转。比如：登录成功跳到首页，点击商品列表的某个商品跳转商品详情等。而常见的写法就是： locat

骑猪看日落/ 2021年09月18日 19:10/ 0 赞/ 679 阅读