next.js 相同的页面内容显示在每个url上

deyfvvtc 于 2023-06-22 发布在其他

关注(0)|答案(1)|浏览(146)

我想在Next JS中使用一个多步骤的表单，但为此我必须在app.js文件中添加如下所示的：

import React from "react";
import ReactDOM from "react-dom";
import App from "next/app";
import Head from "next/head";
import Router from "next/router";
import { SessionProvider } from "next-auth/react";
import StepContext from "./step_context.js";
import PageChange from "components/PageChange/PageChange.js";
import "@fortawesome/fontawesome-free/css/all.min.css";
import "styles/tailwind.css";
import { BrowserRouter, Routes, Route } from "react-router-dom";

Router.events.on("routeChangeStart", (url) => {
  console.log(`Loading: ${url}`);
  document.body.classList.add("body-page-transition");
  ReactDOM.render(
    <PageChange path={url} />,
    document.getElementById("page-transition")
  );
});
Router.events.on("routeChangeComplete", () => {
  ReactDOM.unmountComponentAtNode(document.getElementById("page-transition"));
  document.body.classList.remove("body-page-transition");
});
Router.events.on("routeChangeError", () => {
  ReactDOM.unmountComponentAtNode(document.getElementById("page-transition"));
  document.body.classList.remove("body-page-transition");
});

export default class MyApp extends App {
  componentDidMount() {
    let comment = document.createComment(``);
    document.insertBefore(comment, document.documentElement);
  }
  static async getInitialProps({ Component, router, ctx }) {
    let pageProps = {};

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
    }

    return { pageProps };
  }

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

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

    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>
      </>
    );
  }
}

我必须用标签 Package return语句中的任何内容才能使用多步表单，但这会使web在每个url上显示多步页面表单。
如果我改变代码并将其放入组件中，它会显示添加在每一页下面的表单。
我如何解决这个问题，并显示多步骤的形式只在特定的网址，而不是在每一个页面。

next.js

来源：https://stackoverflow.com/questions/76448435/same-page-content-shows-on-every-url

1条答案

按热度按时间

snz8szmq1#

_app.js或_app.tsx上的任何内容都适用于整个应用程序。它将始终出现在整个应用程序的每个页面上。在这个页面上没有什么可以避免的。
这个文件应该是非常空的。你可以在这里放一个加载动画，但这是每个URL的意思。我不知道你还想在这里得到什么。
接下来使用pages目录中的文件为您创建URL路由。因此，您将根据您希望在URL中看到的内容来命名文件。
另外，我喜欢把我的布局做成一个组件。

/my-app
├── pages/
│   ├── api/
│   ├── _app.js 
│   ├── _document.js 
│   ├── index.js 
│   └── quiz.js // Name this what you want in the URL
└── components/
    └── stepcontext.js
    └── layout.js

或
从页面路由查看新的应用路由器升级。

下面是使用StepContext组件的Quiz页面的外观：

import StepContext from './components/stepcontext'
import Layout from './components/layout'

export default function Quiz() {
  return (
    <Layout title="Quiz | Futur Banking">
      <StepContext />
    </Layout>
  )
}

下面是动态页面标题的布局组件：

const Layout = ({ children, title = "Futur Banking" }: Props) => {
  ...
}

这将为您提供仅在一个URL上的多步骤表单：localhost：3000/quiz。确保从_app.js中删除StepContext。
要在_app.js中手动处理路由，您可以尝试更多类似的方法，将页面视为组件来稍微清理一下，但这并不需要。只需将您的css和类直接添加到组件和页面。

import Quiz from './quiz'
import { useRouter } from 'next/router';
  ...
  const router = useRouter();

  if (router.pathname === '/quiz') {
    return <Quiz {...pageProps} />
  }

  return (
    <> or <React.fragment>
    <Head>
      <meta
        name="viewport"
        content="width=device-width, initial-scale=1, shrink-to-fit=no"
      />

      <title>{title}</title>
    </Head>
    <Component {...pageProps} />
    </> or </React.fragment>
  )

赞(0）回复(0）举报 2023-06-22

我来回答

next.js 相同的页面内容显示在每个url上

1条答案

相关问题

热门标签

最新问答