next.js入门之pages页面_next.js pages

1.简介

在 Next.js 中，一个 page（页面） 就是一个从 .js、jsx、.ts 或 .tsx 文件导出（export）的 React 组件 ，这些文件存放在 pages 目录下。

每个 page（页面）都使用其文件名作为路由（route）。

2.简单路由

创建了一个命名为 pages/about.tsx 的文件并导出

可以通过/about路径进行访问

export default ()=>{
    return <div>About</div>
}

3.动态路由

Next.js 支持具有动态路由的 pages（页面）。

如果你创建了一个命名为 pages/posts/[id].tsx 的文件

那么就可以通过 posts/1、posts/2 等类似的路径进行访问。

import { useRouter } from 'next/router'
 
export default ()=>{
    const router = useRouter()
    const { id } = router.query
  
    return <p>Post: {id}</p>
}

• 目录也会作为路由路径的一部分
• 可以使用router.query获取路径参数&#