用于 react-router Switch 语句的 NextJS 路由器解决方案？

Question

对于那些使用 NextJS 的人，你如何为 react-router 切换行为实现相同的行为。

即...

反应路由器

基础页

--- header
-------some sub content
-------<SWITCH>
           <Route .. for component 1 />
           <Route .. for component 2 />
           <Route .. for component 3 />

这是如何通过 NextJS 实现的？

Answer 1

如果您的目标是在整个应用程序中保留一个布局，您可以使用 next js custom _app.js 来实现这一点。由于 Next js 是基于文件的路由，因此在 pages/ 中创建页面将完成其余的工作

Answer 2

正如其文档所述

Next.js 有一个基于页面概念的基于文件系统的路由器。
将文件添加到 pages 目录后，它会自动作为路由使用。
pages 目录中的文件可用于定义最常见的模式。

index-routes

Answer 3

我也在寻找使用 React 的 Switch 组件的解决方案。但在我这样做之前，这就是我处理条件切换的方式：

export default function Page({ page, pageType }) {

  // ...
  //

  switch (pageType) {
    case 1:
      return (
        <Layout>
          {beards.map((beard) => (
            <BeardedDeveloper {...beard} key={beard.id} />
          ))}
        </Layout>
      );
    case 2:
      return (
        <Layout>
          <BeardedDeveloperDetail {...beard} key={beard.id} />
        </Layout>
      );
  }
}

// for my use-case, `pageType` is defined in my `getStaticProps`
//
export async function getStaticProps({ params }) {

  // ...
  //

  return {
    props: {
      page: page,
      pageType: pageType
    }
  };
}

这是一个整数；但是，它可以很容易地更改为枚举、字符串或任何已定义的类型。

Answer 4

您可以通过以下简单的步骤达到您想要的结果：

1. 您必须将您的路由组件放在 pages 文件夹中，例如 显示为here

在 Next.js 中，页面是从 pages 目录中的文件导出的 React 组件。

页面根据其文件名与路线相关联。例如，在开发中：

• pages/index.js 与 / 路由相关联。
• pages/posts/first-post.js 与 /posts/first-post 路由相关联。

1. 您必须添加一个 Layout 组件，以便您可以向每个路由添加常规组件（例如 header），并使用布局组件包装您的页面，就像 Nextjs 教程中的 here 所示。

src/components/HOC/layout.js

export default function Layout({ children }) {
  return (
    <React.Fragment>
      <header>...</header>
      {children}
    </React.Fragment>
  );
}

pages/profile.js

import Layout from "../src/components/HOC/layout.js";

const Profile = (props) => (
  <Layout>
    <div>User's profile</div>
  </Layout>
);

export default Profile;

您还可以将 title 之类的道具添加到布局组件中，以便您可以为每个特定的路线/页面更改它，如下所示：

src/components/HOC/layout.js

export default function layout(Component, title) {
  return (props) => (
    <React.Fragment>
      <header>{title}</header>
      <Component {...props} />
    </React.Fragment>
  );
}

pages/profile.js

import layout from '../src/components/HOC/layout.js'

const Profile = (userName) => <div>Profile of {userName}</div>;

export default layout(Profile,"Your Profile Page");