在特定页面隐藏横幅答案

【问题标题】：Hiding Banner at a certain page在特定页面隐藏横幅
【发布时间】：2022-02-11 08:44:15
【问题描述】：

我目前正试图在某个页面隐藏横幅。我已经成功地将横幅隐藏在所有其他页面中，除了一个带有 id 的页面。我有一个名为 [content] 的动态文件夹

import { useRouter } from "next/router";

const HIDDEN_BOARDLIST = ["/board/board_list"];
//this is successful 

const HIDDEN_BOARDDETAILS = [`board/${content}`].  
//this does not work 
//http://localhost:3000/board/620471f057aad9002de7f04f. I have to enter the id manually but since this is a dynamic, the id will change every time 

export default function Layout(props: ILayoutProps) {
  const router = useRouter();

  console.log(router.asPath);

  const isHiddenBoardList = HIDDEN_BOARDLIST.includes(router.asPath);

  return (
    <Wrapper>
      <Header />
      {!isHiddenBoardList && <Banner />}
      <BodyWrapper>
        <Body>{props.children}</Body>
      </BodyWrapper>
    </Wrapper>
  );
}

【问题讨论】：

标签： reactjs typescript next.js

【解决方案1】：

useRouter 是一个钩子。

企业社会责任

import React, { useState, useEffect } from 'React';
import { useRouter } from "next/router";

interface ILayoutProps {
  //...
}

export default function Layout(props: ILayoutProps) {
  const router = useRouter();
  const [hidden, setHidden] = useState(false);

  useEffect(() => {
    if(router.asPath.includes('board/')) {
      setHidden(true);
    }
  }, [router.asPath]);

  return (
    <Wrapper>
      <Header />
      {!hidden && <Banner />}
      <BodyWrapper>
        <Body>{props.children}</Body>
      </BodyWrapper>
    </Wrapper>
  );
}

由于此代码是 CSR，因此可能会出现闪烁。 <Banner /> 渲染后会消失。

如果您不希望这样，有一种方法可以通过getServerSideProps 将当前的url 传递为<Layout /> 组件的props。

SSR

// pages/board/[id].tsx
import { GetServerSideProps, NextPage } from 'next';
import Head from 'next/head';

interface Props {
  url: string;
}

const BoardPage: NextPage<Props> = (props: Props) => {
  return (
    <>
      <Layout {...props} />
    </>
  );
};

export const getServerSideProps: GetServerSideProps = async (context) => {
  const { resolvedUrl } = context; //ex) /board/12345?id=12345

  return {
    props: {
      url: resolvedUrl ,
    }, // will be passed to the page component as props
  };
};

// components/Layout.tsx
import React, { useState, useEffect } from 'React';
import { useRouter } from "next/router";

interface ILayoutProps {
  url: string;
  // ...
}

export default function Layout(props: ILayoutProps) {
  return (
    <Wrapper>
      <Header />
      {props.url.includes('board/') && <Banner />}
      <BodyWrapper>
        <Body>{props.children}</Body>
      </BodyWrapper>
    </Wrapper>
  );
}

希望这两种代码对你有帮助。

【讨论】：

是的！有效！ :) 谢谢你