reactjs Next.js选择退出_app. js中特定页面的布局组件

nx7onnlm 于 2022-12-18 发布在 React

关注(0)|答案(7)|浏览(112)

如何使_app.js中包含Layout component的特定页面不换行？
例如，我有两个页面pages/home和pages/about，现在我如何才能**不使用Layout组件 Package **我的pages/home页面？

页数/_应用程序.js

import "../styles/globals.css";
import Layout from "../components/Layout";

function MyApp({ Component, pageProps }) {

      return (
        <Layout>
          <Component {...pageProps} />
        </Layout>
      );
  
}

export default MyApp;

我尝试过的：

页数/_应用程序.js

function MyApp({ Component, pageProps }) {
  console.log(typeof Component); // gives me a function

  switch (Component) {
    case Home():
      return <Component {...pageProps} />;
    default:
      return (
        <Layout>
          <Component {...pageProps} />{" "}
        </Layout>
      );
  }
}

页面/主页.js

import React from 'react';
 
const Home= () => {
  return (<div>Hello</div>);
};
 
export default Home;

型

reactjs

来源：https://stackoverflow.com/questions/66914855/next-js-opt-out-of-layout-component-for-specific-pages-from-app-js

7条答案

按热度按时间

ewm0tg9j1#

通过检查传递给它的appProps.router.pathname属性。

路1

function MyApp({ Component, pageProps, ...appProps }: AppProps) {

  // make function that will return the children based on router.pathname

  const getContent = () => {
    // array of all the paths that doesn't need layout
    if ([`/dashboard`].includes(appProps.router.pathname))
      return <Component {...pageProps} />;

    return (
      <Layout>
        <Component {...pageProps} />{" "}
      </Layout>
    );
  };
   

  return <ApplicationWrapper>{getContent()}</ApplicationWrapper>;
}

路2

function MyApp({ Component, pageProps, ...appProps }: AppProps) {

    // use a LayoutComponent variable 
   // that switches to actual Layout or React.Fragment (no layout) 
   //accordingly to pathname

    const isLayoutNeeded = [`/dashboard`].includes(appProps.router.pathname);

    const LayoutComponent = isLayoutNeeded ? Layout : React.Fragment;

    

  return (<ApplicationWrapper> 
    <LayoutComponent>
        <Component />
    </LayoutCompnent>
    </ApplicationWrapper>);
}

提示：

可以使用path.startsWith检查所有路径，例如

if(router.pathname.startsWith(`/dashboard`))

型

赞(0）回复(0）举报 2022-12-18

lxkprmvk2#

我认为有一种更简洁的方法可以做到这一点。我目前正在为所有页面创建一个默认布局，并为需要特定布局的页面覆盖它，例如在我的登录和注册页面。

export default function LoginPage() {
      return {
        /** Some JSX */
      }
    }
    // Return the page without additional layout.
    LoginPage.getLayout = (page) => page

    export default function MyApp({ Component, pageProps }) {
      // Use the specified page layout or fallback to the default one.
      const getLayout = Component.getLayout ?? defaultPageLayout

      return getLayout(<Component {...pageProps} />)
    }

赞(0）回复(0）举报 2022-12-18

v440hwme3#

我使用了displayName静态属性，它也可以在任何React.js组件中使用。

const OGImagePreview = () => <h1>OG Image Preview</h1>

OGImagePreview.displayName = 'OGImagePreview'

export default OGImagePreview

然后在_app.tsx中使用switch...case，如下所示：

switch (Component.displayName) {
    case 'OGImagePreview':
        return (
            <>
                <Component {...pageProps} />
            </>
        )
    default:
        return (
            <>
                <Head>
                    <meta name="viewport" content="initial-scale=1.0, width=device-width" />
                </Head>
                <ThemeProvider attribute="class" themes={['light', 'dark']}>
                    <Progress />
                    <Nav />
                    <Component {...pageProps} />
                </ThemeProvider>
                <ScrollToTop />
                <Analytics />
            </>
        )
}

赞(0）回复(0）举报 2022-12-18

wfveoks04#

这个怎么样？希望可以保存

import "../styles/globals.css";
import dynamic from "next/dynamic";
const Layout = dynamic(() => import("@layout/Layout"));
import { useRouter } from "next/router";

function MyApp({ Component, pageProps }) {
  const router = useRouter();
  return (
    <>
      {router.pathname !== "/" ? (
        <Layout>
          <Component {...pageProps} />
        </Layout>
      ) : (
        <Component {...pageProps} />
      )}
    </>
  );
}

export default MyApp;

赞(0）回复(0）举报 2022-12-18

jucafojl5#

您可以简单地利用'next/router'中的useRouter，轻松完成您的工作。

import {useRouter} from 'next/router';

function MyApp({ Component, pageProps }) {
  const router = useRouter();

  if(router.asPath =='/dashboard')  {
     return (
       <Component {...pageProps} />
     )
  }

 return (
   <Layout>
     <Component {...pageProps} />
   </Layout>
 );
 }

赞(0）回复(0）举报 2022-12-18

2w3kk1z56#

使用higher order components怎么样？它们不是react API的一部分，但正如react文档所述，“它们是从React的组合特性中产生的模式。”Next使用react，因此在next中使用react模式确实有意义
以下代码使用预定义的Header和Footer组件 Package 给定的组件，然后使用该组件的组件在导出时使用HOC Package

const withLayout = Comp =>  {
        const WrappedComp = (props) => {
            return (
                <div id='layout'>
                    <Header />
                    <Comp {...props} />
                    <Footer />
                </div>
            );
        }
        return WrappedComp;
    }

    const Section = () => {
        return ( 
            <section>
                Section content...
            </section>
        );
    }

    export default withLayout(Section);

赞(0）回复(0）举报 2022-12-18

wi3ka0sx7#

我试过我的代码在这种方式和它的工作对我来说很好。

`
    import { useRouter } from "next/router";
    function MyApp({ Component, pageProps}: AppProps) {
      const router = useRouter();
      return (
        <>
          {router.pathname !== "/contact" ? (
            <>
              <NavBar />
              <Component {...pageProps} />
              <JoinUsSection />
              <Footer />
            </>
          ) : (
            <>
              <NavBar />
              <Component {...pageProps} />
              <Footer />
            </>
          )}
        </>
      );

}`

赞(0）回复(0）举报 2022-12-18

我来回答

reactjs Next.js选择退出_app. js中特定页面的布局组件

7条答案

路1

路2

相关问题

热门标签

最新问答