探索NextJs(二)Next.js文件路由特性

Next.js文件系统路由介绍

Next.js使用基于文件系统的路由方式,这与传统React应用中基于代码声明路由形成对比。

Next.js文件路由 vs 传统React路由

在不使用Next.js的React应用中,我们通常需要通过导入react-router-dom并在代码中声明路由来设置路由:

// App.js
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes> 
    </Router>
  )
}

这需要编写额外的路由设置代码。

而在Next.js中,我们可以直接通过文件系统结构来定义路由,无需任何额外声明。

Next.js文件路由示例

在Next.js中,pages目录下的文件结构即路由结构。

pages/
  index.js -> '/'
  about.js -> '/about'

根路由

pages/index.js对应网站根路径/:

// pages/index.js

export default function Home() {
  return <h1>Home</h1>
}

根路由一般使用index.js文件进行声明。 

 标准路由

与根路由类似,普通的路由也可以直接通过文件进行定义:

pages/about.js对应/about路径:

// pages/about.js

export default function About() {
  return <h1>About</h1>
}

嵌套路由

对于嵌套的路由路径,我们可以使用文件夹的方式进行嵌套:

pages/blog/[id].js对应嵌套路径/blog/:id:

[]表示这是一个动态路由参数,参数名称可以进行自定义。

// pages/blog/[id].js

export default function Post() {
  return <h1>Post</h1> 
}

获取动态参数

在动态路由组件内,可以通过useRouter hook来获取具体的参数值:

// pages/blog/[id].js

import { useRouter } from 'next/router'

export default function Post() {
  const router = useRouter()
  const { id } = router.query

  return <h1>Post {id}</h1>
}

以上示例展示了Next.js文件路由的各种使用方式,可以满足实际应用的多种场景。Next.js通过文件系统组织路由,让我们的React应用更简单直接。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值