Next.js学习系列:在页面之间导航2
**如果要继续上一课,**可以跳过此页面。单击下面的按钮转到下一页。
下载入门代码(可选)
如果您不打算继续上一课,可以在下面下载、安装和运行本课程的入门代码。这将设置一个目录,使其与上一课的结果相同。nextjs-blog
同样,如果您刚刚完成上一课,则不需要这样做。
npx create-next-app nextjs-blog –use-npm –example “https://github.com/vercel/next-learn/tree/master/basics/navigate-between-pages-starter"
然后按照命令输出中的说明(进入目录并启动开发服务器)进行操作。cd
开始
在 Next.js 中,页面是从 pages
目录中的文件导出的 React 组件。
页面根据其文件名与路由相关联。例如,在开发中:
pages/index.js
与路由相关联。/
pages/posts/first-post.js
与路由相关联。/posts/first-post
我们已经有了这个文件,所以让我们创建看看它是如何工作的。pages/index.js``````pages/posts/first-post.js
创建新主页
在 下创建目录。posts ``````pages
创建在目录中调用的文件,其中包含以下内容:first-post.js``````posts
export default function FirstPost() {
return
First Post
}
该组件可以具有任何名称,但您必须将其导出为导出。default
现在,确保开发服务器正在运行,并访问 http://localhost:3000/posts/first-post。您应该会看到该页面:
这就是如何在 Next.js 中创建不同的页面。
只需在 pages
目录下创建一个 JS 文件,该文件的路径就变成了 URL 路径。
在某种程度上,这类似于使用HTML或PHP文件构建网站。你不是写HTML,而是编写JSX并使用React Components。
让我们添加一个指向新添加的页面的链接,以便我们可以从主页导航到它。
- 原文作者:知识铺
- 原文链接:https://geek.zshipu.com/post/nextjs/nextjsbase/Next.js%E5%AD%A6%E4%B9%A0%E7%B3%BB%E5%88%97%E5%9C%A8%E9%A1%B5%E9%9D%A2%E4%B9%8B%E9%97%B4%E5%AF%BC%E8%88%AA2/
- 版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可,非商业转载请注明出处(作者,原文链接),商业转载请联系作者获得授权。
- 免责声明:本页面内容均来源于站内编辑发布,部分信息来源互联网,并不意味着本站赞同其观点或者证实其内容的真实性,如涉及版权等问题,请立即联系客服进行更改或删除,保证您的合法权益。转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。也可以邮件至 sblig@126.com