使用顶部导航
接下来,我们导入此组件并将其用于我们的页面。 对于index.js页面,它将如下所示:
import Header from '../components/Header'
export default () => (
<div>
<Header />
<p>Hello Next.js</p>
</div>
)
您也可以在about.js页面上执行相同操作。
此时,如果您通过 http://localhost:3000/ 导航到您的应用程序,您将可以看到新的 Header 并在页面之间导航。
我们尝试对我们的应用进行一些简单的修改。
- 停止正在运行的应用程序
- 将组件目录重命名为comps。
- 从../comps/Header导入头,而不是../components/Header。
- 再次启动应用程序。
它会工作吗?
✓Yes。
✦No。 它会抛出一个错误:“未找到组件”。
✦No。 它会抛出一个错误:“组件需要在组件目录中。”
✦No。 它会抛出一个错误:“comps是一个无效的目录”。