编程题： 1.在一个电商项目中，需要展示商品列表和商品详情。商品列表页面需要嵌套商品详情页面。请配置相应的嵌套路由，并在商品列表中实现点击商品跳转到对应商品详情的功能。商品要求至少3种，并且有图片展示和文字，点击文字能进去子界面，查看商品的详细信息

在电商项目的前端开发中，通常会使用如React Router、Vue Router这样的路由管理库来配置嵌套路由。以下是基于React Router的一个简单示例：

1. 首先，安装必要的依赖：

   npm install react-router-dom

2. 定义路由：

   import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
   
   // 商品列表组件
   const ProductList = () => {
     return (
       <div>
         {products.map(product => (
           <Link key={product.id} to={`/product/${product.id}`}>
             {/* 图片显示 */}
             <img src={product.image} alt={product.name} />
             {/* 文字描述 */}
             <span>{product.name}</span>
           </Link>
         ))}
       </div>
     );
   };

   // 商品详情组件
   const ProductDetail = ({ match }) => {
     const productId = match.params.productId;
     return <ProductDetailComponent productId={productId} />;
   };

   // 主路由配置
   function App() {
     return (
       <Router>
         <Route exact path="/" component={ProductList} /> {/* 主页或商品列表 */}
         <Route path="/product/:productId" component={ProductDetail} /> {/* 单品详情路由 */}
       </Router>
     );
   }

在这个例子中，`ProductList`组件是一个列表，每个商品通过`<Link>`组件链接到对应的路由`/product/:productId`，`:productId`是一个动态参数，用于匹配实际的商品ID。用户点击商品时，浏览器会被导航到`ProductDetail`组件，其中传递了商品ID作为props，以便从服务器获取详细的商品信息。