next.js路由的学习

next.js给我们配置好路由了，next.js默认匹配pages目录的index.js作为根路径/，其他的路径也是这样按文件名匹配的。而我们的各种路由跳转依赖的不再是react-router而是next.js给我们封装好的路由

在 pages文件夹新建文件夹  my ，在my里新建my.js

在浏览器 输入   http://localhost:3000/my/my，就能跳转到 my 页面

 

<Link>跳转

可以用 <Link> 组件实现客户端的路由切换。

import Link from 'next/link'
const index = () => (
  <div>
    Welcome to next.js!
    <Link href="/my/my">
      <a>to my</a>
    </Link>
  </div>
)
export default index

js跳转

组件路由跳转支持点击事件 onClick 

import Link from 'next/link'
import Router from 'next/router'
const index = () => (
  <div>
    Welcome to next.js!
    <Link href="/my/my">
      <a>to my</a>
    </Link>
    <button
      onClick={() => {
        Router.push('/my/my')
      }}
    >
      点击啊
    </button>
  </div>
)
export default index