Next.js多步骤表单仅在指定URL显示的实现方案咨询

方案一：在_app.js中根据路由路径条件渲染StepContext #

利用Next.js的router对象获取当前页面路径，仅在指定路径下用StepContext包裹页面内容，其他路径正常渲染。

修改MyApp组件的render方法：

render() {
  const { Component, pageProps, router } = this.props;

  const Layout = Component.layout || (({ children }) => <>{children}</>);
  // 填写需要显示多步骤表单的页面路径，可添加多个路径到数组
  const allowedPaths = ['/multi-step-form'];

  if (allowedPaths.includes(router.pathname)) {
    return (
      <>
        <StepContext>
          <React.Fragment>
            <Head>
              <meta
                name="viewport"
                content="width=device-width, initial-scale=1, shrink-to-fit=no"
              />
              <title>Futur Banking</title>
            </Head>
            <Layout>
              <Component {...pageProps} />
            </Layout>
          </React.Fragment>
        </StepContext>
      </>
    );
  }

  // 其他页面不使用StepContext包裹
  return (
    <>
      <React.Fragment>
        <Head>
          <meta
            name="viewport"
            content="width=device-width, initial-scale=1, shrink-to-fit=no"
          />
          <title>Futur Banking</title>
        </Head>
        <Layout>
          <Component {...pageProps} />
        </Layout>
      </React.Fragment>
    </>
  );
}

方案二：仅在目标页面组件中使用StepContext #

直接从_app.js中移除全局的StepContext包裹，只在需要显示表单的页面组件中单独引入并使用：

1. 先修改_app.js的render方法，去掉全局StepContext：

render() {
  const { Component, pageProps } = this.props;

  const Layout = Component.layout || (({ children }) => <>{children}</>);

  return (
    <>
      <React.Fragment>
        <Head>
          <meta
            name="viewport"
            content="width=device-width, initial-scale=1, shrink-to-fit=no"
          />
          <title>Futur Banking</title>
        </Head>
        <Layout>
          <Component {...pageProps} />
        </Layout>
      </React.Fragment>
    </>
  );
}

2. 在目标页面组件（比如pages/multi-step-form.js）中使用StepContext：

// pages/multi-step-form.js
import StepContext from '../step_context.js';
import MultiStepForm from '../components/MultiStepForm';

export default function MultiStepFormPage() {
  return (
    <StepContext>
      <MultiStepForm />
    </StepContext>
  );
}

方案对比 #

• 方案一适合需要在多个指定页面共享StepContext状态的场景，上下文状态可跨页面保留。
• 方案二更轻量化，每个页面独立控制上下文使用，不会影响其他页面，适合仅单个页面需要多步骤表单的场景。

内容的提问来源于stack exchange，提问作者flaw