next.js 笔记
- 多个页面都有的东西放到
layout.tsx
中(比如导航栏,底部信息),当前页面内容放到page.tsx
- 动态路由使用方括号、方括号+省略号、双方括号+省略号表示,参数名就是路由命名。可以使用
generateStaticParams
返回指定的参数数组,在编译时生成对应的静态页面,提高性能,返回空数组或者使用export const dynamic = 'force-static'
则在第一次访问时给每个参数生成一个静态页面。使用export const dynamicParams = false
会将指定参数以外的页面返回404 - 并行路由只多了个可以用url访问弹窗的功能,假如有弹窗需要分享或者保留历史记录的需求,可以用这个功能,直接访问url需要配合拦截路由
- 拦截路由使用
(..)
开头,在应用内导航的路径会使用这个拦截路由,直接访问url或刷新会访问默认路由 - 中间件的匹配器除了
:path
、:path*
以外,还可以在圆括号中使用正则表达式,比如/api(.*)
template.tsx
和layout.tsx
差不多,区别是template.tsx
会在路由更新时重新加载,可以用在页面切换动画上,而layout.tsx
只会加载首次
本文是原创文章,采用 CC BY-NC-ND 4.0 协议,完整转载请注明来自 曹尼玛
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果
音乐天地