P03：路由基础和基本跳转

阐述

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

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

标签式导航

在编写代码之前，先删除 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 () => (
    
        willem -a page .
        返回首页
    
)

next-create\pages\willemB.js

import Link from 'next/link'

export default () => (
    
        willem -b page .
        返回首页
    
)

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

next-create\pages\index.js

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

const Home = () => (
  
    我是首页
    去willemA页面
    去willemB页面

  
)

export default Home

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

如果这样写会直接报错

 
   
     去willemA页面
     前端博客
   
 

报错信息如下:

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

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

  
    去willemA页面
    前端博客
  

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

Router模块进行跳转

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

import Router from 'next/router'

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

    {Router.push('/mybjA')}}>去MybjA页面

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

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

const Home = () => (
  
    我是首页
    去willemA页面
    去willemB页面

    

    
      
        去willemA页面
        前端博客
      
    

    
        {Router.push('/willemA')}}>去willemA页面
    
    

  
)

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(
    
      我是首页

      
        
          
            去willemA页面
            前端博客
          
        
      

      去willemB页面

      
        去willemA页面
      

    
  )

}

export default Home

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