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