ReactJS如何根据URL路径条件渲染Layout中的组件？

方法1：通过路由路径判断（推荐） #

借助react-router-dom的useLocation钩子获取当前页面路径，根据路径决定是否渲染特定组件。

先确保项目已安装react-router-dom，再修改Layout组件：

import { useLocation } from 'react-router-dom';

const Layout = ({ children, title, description, keywords, author }) => {
  const location = useLocation();
  // 根据实际路由路径调整判断条件
  const isHomePage = location.pathname === '/';
  const isLoginPage = location.pathname === '/login';

  return (
    <div className="container-fluid">
      <Helmet>
        <meta charSet="utf-8" />
        <meta name="description" content={description} />
        <meta name="keywords" content={keywords} />
        <meta name="author" content={author} />
        <title>{title}</title>
      </Helmet>
      <Header />
      <main style={{ minHeight: "70px" }}>
        <Toaster />
        {children}
      </main>
      {/* 仅首页显示Intro组件 */}
      {isHomePage && <Intro />}
      {/* 仅首页显示YTvedeo组件 */}
      {isHomePage && <YTvedeo />}
      {/* 登录页不显示Footer */}
      {!isLoginPage && <Footer />}
      {/* 登录页不显示Bottom */}
      {!isLoginPage && <Bottom />}
    </div>
  );
};

Layout.defaultProps = {
  title: "Thebandwala - Book Best music Bands,Dhol",
  description: "Best service made for you",
  keywords: "music Band,Dhol,Ghodi",
  author: "Thebandwala",
};

export default Layout;

方法2：通过自定义props控制 #

在使用Layout的页面组件中传递控制显示的参数，在Layout内根据参数判断组件渲染逻辑。

1. 修改Layout组件 #

const Layout = ({ children, title, description, keywords, author, displayMode = 'full' }) => {
  // displayMode可选值：'full'（全组件显示）、'login'（仅显示核心组件）
  return (
    <div className="container-fluid">
      <Helmet>
        <meta charSet="utf-8" />
        <meta name="description" content={description} />
        <meta name="keywords" content={keywords} />
        <meta name="author" content={author} />
        <title>{title}</title>
      </Helmet>
      <Header />
      <main style={{ minHeight: "70px" }}>
        <Toaster />
        {children}
      </main>
      {displayMode === 'full' && <Intro />}
      {displayMode === 'full' && <YTvedeo />}
      {displayMode !== 'login' && <Footer />}
      {displayMode !== 'login' && <Bottom />}
    </div>
  );
};

Layout.defaultProps = {
  title: "Thebandwala - Book Best music Bands,Dhol",
  description: "Best service made for you",
  keywords: "music Band,Dhol,Ghodi",
  author: "Thebandwala",
};

export default Layout;

2. 在页面中使用Layout #

• 首页（全组件显示）：

const Home = () => {
  return (
    <Layout>
      {/* 首页内容 */}
    </Layout>
  );
};

• 登录页（仅显示指定组件）：

const Login = () => {
  return (
    <Layout displayMode="login" title="登录页">
      {/* 登录页内容 */}
    </Layout>
  );
};

注意事项 #

• 可根据实际路由路径、页面需求调整判断条件，比如多页面场景可以用switch或对象映射管理组件显示规则
• 如果不需要Header在登录页显示，可给Header也加上条件判断：{!isLoginPage && <Header />}

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