JSX 表達式必須有一個父元素.ts(2657) 反應錯誤

Question

我正在嘗試創建應用程序的前端並不斷收到以下錯誤請幫助我這是我的代碼。

function App() {
  return (
    <div>
      <header>
        <a href="/">amazona</a>
      </header>
      <main>
        <h1>Featured Products</h1>
        <div className="products">
          {data.products.map((product) => (
            <div className="product" key={product.slug}>
              <a href={`/product/${product.slug}`}>
                <img src={product.image} alt={product.name} />
              </a>
              <div className="product-info">
                <a href={`/product/${product.slug}`}>
                  <p>{product.name}</p>
                </a>
                <p>
                  <strong>${product.price}</strong>
                </p>
                <button>Add to cart</button>
              </div>
            </div>
          ))}
        </div>
      </main>
    </div>
    <BrowserRouter>
      <div>
        <header>
          <Link to="/">amazona</Link>
        </header>
        <main>
          <Routes>
            <Route path="/product/:slug" element={<ProductScreen />} />
            <Route path="/" element={<HomeScreen />} />
          </Routes>
        </main>
      </div>
    </BrowserRouter>
  );
}

我不知道如何解決這個問題。 你能幫助我嗎？

Answer 1

您需要將 JSX 返回元素包裝到一個元素中。 您返回的是 JSX.Element 而不是 JSX.Element[]。 您需要做的就是將返回元素包裝到 <></> 中，如下所示：

   function App() {
     return (
       <>
        <div>
         <header>
           <a href="/">amazona</a>
         </header>
         <main>
           <h1>Featured Products</h1>
           <div className="products">
             {data.products.map((product) => (
               <div className="product" key={product.slug}>
                 <a href={`/product/${product.slug}`}>
                   <img src={product.image} alt={product.name} />
                 </a>
                 <div className="product-info">
                   <a href={`/product/${product.slug}`}>
                     <p>{product.name}</p>
                   </a>
                   <p>
                     <strong>${product.price}</strong>
                   </p>
                   <button>Add to cart</button>
                 </div>
               </div>
             ))}
           </div>
         </main>
       </div>
       <BrowserRouter>
         <div>
           <header>
             <Link to="/">amazona</Link>
           </header>
           <main>
             <Routes>
               <Route path="/product/:slug" element={<ProductScreen />} />
               <Route path="/" element={<HomeScreen />} />
             </Routes>
           </main>
         </div>
       </BrowserRouter>
      </>
     );
   }