当前位置: 首页 > 后端技术 > Node.js

学习Next.js:使用路由掩码创建干净的URL

时间:2023-04-04 00:25:10 Node.js

原始文档位于https://github.com/developerw...现在移动到这里。学习Next.js:入门学习Next.js:在页面之间导航学习Next.js:使用共享组件学习Next.js:创建动态内容学习Next.js:使用路由掩码创建干净的URL学习Next.js:服务器支持用于干净的URL学习Next.js:获取数据学习Next.js:使用路由掩码进行部署以创建干净的URL在之前的课程中,我们学习了如何使用查询字符串来创建动态页面。在一次性的基础上,我们的博客文章链接看起来像这样:http://localhost:3000/post?title=Hello%20Next.js但是这个URL看起来不太好很好,我们应该怎么做如果我们想要一个像下面这样的链接?http://localhost:3000/p/hello-nextjs看起来好多了,不是吗?为了学习本课程,我们需要一个示例Next.js应用程序,为此,您可以下载以下应用程序作为学习案例:gitclonehttps://github.com/arunoda/learnnextjs-demo.gitcdlearnnextjs-demogitcheckoutcreate-dynamic-pages使用以下命令运行它:npminstallnpmrundev现在,访问http://localhost:3000/。路由屏蔽现在,我们将使用Next.js独有的功能,称为路由屏蔽。基本上,它会在地址栏上显示一个与实际URL不同的地址。现在,让我们为我们的博客地址添加一个路由掩码。pages/index.js内容修改如下:importLayoutfrom'../components/MyLayout.js'importLinkfrom'next/link'constPostLink=(props)=>(

  • {props.title}
  • )exportdefault()=>(

    我的博客

    )看看下面的代码块:constPostLink=(props)=>(
  • {props.title}
  • )在元素中,我们使用另一个熟悉的名称as。这就是我们需要在浏览器地址栏中显示的URL。应用程序看到的实际URL实际上在熟悉的href中。现在单击博客标题链接,转到博客内容页面。历史感知如您所见,路由掩码也可以很好地处理浏览器历史记录。所有需要做的就是向链接添加一个as属性。Reload现在,进入主页:http://localhost:3000/,点击第一个博客标题,您将被导航到博客内容页面。点击刷新按钮重新加载页面,会发生什么?404页面刷新操作返回一个404错误页面。这是因为,我们在服务器上没有这样的可加载页面。服务器会尝试加载p/hello-next.js文件,但实际上这个文件并不存在,我们现在只有index.js和post.js两个文件。因此,我们需要解决这个问题问题。在下一课中,我们将使用Next.js的自定义服务器API来解决这个问题。