如何將此頁面保存到localStorage

當我部署我的應用程式時。

每次我重繪 棕色。我收到一條訊息說找不到頁面。

我知道 React JS 是一個基于記憶體的應用程式，它不存盤任何東西。

如果需要，我將不得不使用 localStorage 和許多其他選項，例如 IndexedDB、cookie 等。

我的問題是，我需要存盤到 localStorage 的不是函式或方法。我的頁面只有內容。

如何將其添加到 localStorage 或我該怎么做？

import React, { useState, useEffect } from "react";
import  {Link, generatePath } from "react-router-dom";
import Navigationbar from "../components/navigationbar/navigationbar";
import ProductsHeader from "../components/products-header/ProductsHeader";
import Shopbybrand from "../components/shopbybrand/shopbybrand";
import Footer from "../components/footer/footer";

const Products = ({ products, countCartItem }) => {


  return (
    <>
      <div style={{ background: "transparent", display: "flow-root" }}>
        <div
          className="productDetails"
          style={{
            display: "block",
            background: "black",
            borderRadius: " 0 0 30px 30px",
            padding: 20,
            marginBottom: 30,
          }}  
        >
          <Navigationbar countCartItem={countCartItem} />
          <ProductsHeader />
        </div>
        <div className="container">
          <div>
            <span style={{ fontSize: 12, fontWeight: 700 }}>Vouchers</span>
            <br />
            <span style={{ fontSize: 40, fontWeight: 700,  }}>Discover</span>
            <ul
              style={{
                listStyle: "none",
                padding: 0,
                paddingTop: 50,
                maxWidth: 1800,
                margin: "0 auto",
                display: "flex", 
                flexWrap: "wrap",
                justifyContent: "start"
              }}
            >
              {products.map((item) => (
                <li
                  key={item.ProductCode}
                  style={{ paddingBottom: 15, maxWidth: 240, float: "", display: "flex", margin: "9px" }}
                >
                  <Link
                    to={generatePath(
                      "/itemDetail/:ProductCode/:FaceValue/:Vendor/",
                      {
                        ProductCode: item.ProductCode,
                        FaceValue: item.FaceValue,
                        // Vendor: item.Vendor.replaceAll(/\W/g, "")
                        Vendor: item.Vendor,
                        Vat: item.Vat,
                      }
                    )}
                  >
                    <div
                      className="card"
                      style={{ margin: 0, borderRadius: 25, backgroundColor: "#white" }}
                    >
                      <img
                        src={item.Logo}
                        className="card-img-top"
                        alt="..."
                        style={{ width: "390px !important", borderRadius: 25 }}
                      />
                      <div style={{ marginTop: "10px", margin: 20 }}>
                        <p style={{color: "black"}}>{item.Vendor}</p>
                        <h6 style={{ fontSize: 19, fontWeight: 600, color: "black" }}>
                          {item.Description}
                        </h6>
                        <h2 style={{ fontSize: 26, fontWeight: 700, color: "black" }}>
                          R {item.FaceValue}{" "}
                          <span style={{ display: "none", color: "black" }}>{item.Vat} </span>
                        </h2>
                      </div>
                    </div>
                  </Link>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
      <div style={{ display: "flex !important", background: "white", marginTop: 65 }}>
        <Shopbybrand />
        <Footer />
      </div>
    </>
  );
};

export default Products;

uj5u.com熱心網友回復：

實際上，當您將 React 應用程式部署到 Netlify 時，它會顯示錯誤，因此，要解決它在您的構建檔案夾中添加一個新檔案名_redirects并粘貼以下內容 -

/*    /index.html    200

標籤：javascript 反应

上一篇：部署到Vercel時出錯（錯誤：命令“npmrunbuild”以127退出）

下一篇：當URL中的引數發生更改時自動更新頁面上的資料-FlaskPython