React如何根据路由动态显示Products组件的部分链接？

在React项目中配置了路由，首页展示完整的Products组件（包含WEB DESIGN、APP DESIGN、GRAPHIC DESIGN三个Link，其中WEB DESIGN占网格两行）。当用户点击WEB DESIGN链接进入WebDesign页面后，希望该页面中的Products组件仅显示APP DESIGN和GRAPHIC DESIGN两个链接，并调整为一行布局，请问该如何实现这种根据路由动态渲染组件部分内容的功能？

解决方案 #

要实现这个需求很简单，核心就是给Products组件增加可配置的属性，根据当前路由场景动态控制显示内容和布局，具体操作如下：

1. 改造Products组件，支持动态配置 #

给Products组件加上两个参数：exclude（用来指定要隐藏的链接类型）和layout（控制布局样式），根据参数决定渲染哪些链接，以及使用对应的容器类名。

2. 在不同页面调用时传递对应参数 #

• 首页（/）调用Products时，不传额外参数，保持默认网格布局，显示全部三个链接
• WebDesign页面调用时，传exclude="web"隐藏WEB DESIGN链接，再传layout="row"启用一行布局

3. 编写对应CSS样式 #

针对不同的容器类名，分别设置网格布局（首页）和弹性一行布局（WebDesign页面），其中首页的WEB DESIGN链接单独设置占两行的网格属性。

4. 优化App组件的路由结构 #

原App组件中拆分的多个<Routes>标签完全冗余，合并为一个即可，符合React Router的使用规范。

修改后的代码示例 #

Products组件

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

const Products = ({ exclude, layout = 'grid' }) => {
  return (
    <div className={`products products--${layout}`}>
      {/* 只有当exclude不是web时，才渲染WEB DESIGN链接 */}
      {exclude !== 'web' && (
        <Link to="/webdesign" className="web-design">
          <h2>WEB DESIGN</h2>
          <p>VIEW PROJECTS</p>
        </Link>
      )}
      <Link to="/appdesign" className="app-design">
        <h2>APP DESIGN</h2>
        <p>VIEW Projects</p>
      </Link>
      <Link className="graphic-design">
        <h2>GRAPHIC DESIGN</h2>
        <p>VIEW Projects</p>
      </Link>
    </div>
  );
};

export default Products;

App组件

import { Routes, Route } from 'react-router-dom';
import Navbar from './Navbar';
import Hero from './Hero';
import WebDesign from './WebDesign';
import Products from './Products';
import Feature from './Feature';
import Modal from './Modal';
import Footer from './Footer';

function App() {
  return (
    <main className="container">
      <Navbar />
      <Routes>
        <Route 
          path="/" 
          element={
            <>
              <Hero />
              <Products />
              <Feature />
              <Modal />
              <Footer />
            </>
          } 
        />
        <Route path="/webdesign" element={<WebDesign />} />
      </Routes>
    </main>
  );
}

export default App;

WebDesign组件

import Products from './Products';
import Modal from './Modal';
import Footer from './Footer';

const WebDesign = () => {
  return (
    <div className="webdesign-page">
      <h1 className="web-design-title">Web Design</h1>
      <p className="web-design-paragraph">
          We build websites that serve as powerful
          marketing tools and bring memorable brand experiences.
      </p>
      <div className="webpage-images">
          {/* 原有图片内容保持不变 */}
          <div className="webdesign-site">
              <img src="./assets/web-design/desktop/image-express.jpg" className="webdesign-image"/>
              <p className="webdesign-content" >Express</p>
              <p className="webdesign-description">A multi-carrier shipping website for ecommerce businesses</p>
          </div>
          <div className="webdesign-site">
              <img src="./assets/web-design/desktop/image-transfer.jpg" className="webdesign-image"/>
              <p className="webdesign-content"> TRANSFER</p>
              <p className="webdesign-description">Site for low-cost money transfers and sending money within seconds</p>
          </div>
          <div className="webdesign-site">
              <img src="./assets/web-design/desktop/image-photon.jpg" className="webdesign-image"/>
              <p className="webdesign-content">PHOTON</p>
              <p className="webdesign-description">A state-of-the-art music player with high-resolution audio and DSP effects</p>
          </div>
          <div className="webdesign-site">
              <img src="./assets/web-design/desktop/image-builder.jpg" className="webdesign-image"/>
              <p className="webdesign-content">BUILDER</p>
              <p className="webdesign-description">Connects users with local contractors based on their location</p>
          </div>
          <div className="webdesign-site">
              <img src="./assets/web-design/desktop/image-blogr.jpg" className="webdesign-image"/>
              <p className="webdesign-content">BLOGR</p>
              <p className="webdesign-description">Blogr is a platform for creating an online blog or publication</p>
          </div>
          <div className="webdesign-site">
              <img src="./assets/web-design/desktop/image-camp.jpg" className="webdesign-image"/>
              <p className="webdesign-content">CAMP</p>
              <p className="webdesign-description">Get expert training in coding, data, design, and digital marketing</p>
          </div>
      </div>
      {/* 传递参数控制隐藏WEB DESIGN并启用一行布局 */}
      <Products exclude="web" layout="row" />
      <Modal />
      <Footer />
    </div>
  );
};

export default WebDesign;

配套CSS样式

/* 首页默认网格布局 */
.products--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 1rem;
}

.products--grid .web-design {
  grid-row: span 2; /* WEB DESIGN占两行 */
}

/* WebDesign页面的一行布局 */
.products--row {
  display: flex;
  gap: 1rem;
  justify-content: center; /* 可根据需求调整对齐方式 */
}

/* 基础链接样式（保留原有样式） */
.web-design, .app-design, .graphic-design {
  padding: 2rem;
  text-decoration: none;
  color: white;
  border-radius: 0.5rem;
}

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