学习Next.js：使用共享组件

原始文档位于https://github.com/developerw...现在移动到这里。学习Next.js：入门学习Next.js：在页面之间导航学习Next.js：使用共享组件学习Next.js：创建动态内容学习Next.js：使用路由掩码创建干净的URL。通过导出一个React组件创建一个页面，然后将其放在pages目录中。基于这个文件名，Next.js有一个固定的URL。因为导出的页面是Javascript模块，我们当然可以导入其他组件。在本课中，我们将创建一个共享标头组件并在多个页面之间共享它。最后，我们将创建一个布局组件，看看它如何定义多个页面的外观。搭建演示这个我们先说说本课的知识点，我们需要一个可运行的示例应用，通过以下命令得到一个现成的应用：gitclonehttps://github.com/arunoda/learnnextjs-demo。gitcdlearnnextjs-demogitcheckoutnavigate-between-pages可以通过以下命令行运行：npminstallnpmrundev访问http://localhost:3000。创建标头组件现在，让我们为我们的应用程序创建一个标头组件。将以下代码添加到components/Header.js模块文件中。importLinkfrom'next/link'constlinkStyle={marginRight:15}constHeader=()=>(

)exportdefaultHeader该组件包含两个指向其他页面的链接。我们还为这两个链接设置了一个样式对象，并将其字体设置为15。使用页眉组件现在，让我们在页面中导入我们刚刚创建的页眉组件。现在对于pages/index.js，其内容如下所示：importHeaderfrom'../components/Header'exportdefault()=>()您可以对pages/about.js页面执行相同的操作。现在，如果您访问http://localhost:3000/，您将看到新的标头并能够在页面之间导航。现在，我们对应用程序进行一些小的更改。停止应用程序。将组件目录重命名为comps。从。./comps/Header导入而不是../components/Header再次启动应用程序，它仍然有效吗？组件目录是的，和以前一样，工作正常！我们不需要把组件放在一个专门的目录下，组件目录可以随便命名，唯一一个专门的目录就是pages目录，你甚至可以在pages目录下创建一个组件目录。在这里，我们没有直接在pages目录下创建组件目录，因为我们不需要直接连接到Header组件。译注：pages目录就像web服务器的根目录。通过自然目录/URL路径，可以访问pages目录下的组件。就像Linux文件系统一样，URL中的PATH和文件系统的路径是一一对应的。布局组件在我们的应用程序中，我们在多个页面之间共享一个通用样式。为此，我们可以创建一个通用布局组件并在多个页面中使用它。这里有一个例子，添加下面的代码到components/MyLayout.js模块文件中：importHeaderfrom'./Header'constlayoutStyle={margin:20,padding:20,border:'1pxsolid#DDD'}constLayout=(props)=>(

{props.children}