是否可以使用 NextJS 对所有路由使用一次组件答案

【问题标题】：Is it possible to use once a component for all routes with NextJS是否可以使用 NextJS 对所有路由使用一次组件
【发布时间】：2021-07-13 13:18:35
【问题描述】：

我是 NextJS 的初学者
我的问题很简单：我只想知道 NextJS 是否可以做到这一点

// with react-router-dom
<Router>
    <>
        <Header />
        <Switch>
          <Route path="/">
                <Home />
            </Route>
            <Route path="/about">
                <About />
            </Route>
            <Route path="/users">
                <Users />
            </Route>
        </Switch>
    </>
</Router>

我希望在我的所有页面中都有<Header />，而不是每次更改页面时都呈现

目前我在每个页面中调用我的标题，但道具重新初始化。

【问题讨论】：

这能回答你的问题吗？ Have a common header layout in nextjs

标签： javascript reactjs routes react-router next.js

【解决方案1】：

你不能也不应该，因为 NextJs 已经内置了 switch 模式。

查看相关Migrating from React Router部分：

使用 Next.js，您可以在文件系统中表达相同的应用程序结构。将文件添加到 pages 目录时，它会自动作为路由使用。

pages/about.js → /about
pages/blog.js → /blog
pages/index.js → /

【讨论】：

【解决方案2】：

对于 Next.js，您不需要使用 react-router-dom，因为 Next.js 有一个基于页面概念的基于文件系统的路由器。

该组件不能添加到路由中，您必须在每个索引页面中添加它。

在此处查看他们的文档：https://nextjs.org/docs/routing/introduction

【讨论】：