How can I save this page to localStorage

Question

When I deploy my application.

Each time I refresh the brown. I get a message saying page not found.

I know that React JS is a memory based applicaion, it does not store anything.

If I need to, I will have to use localStorage and many other options out there like IndexedDB, cookies etc.

My problem is, what I need to store to localStorage in not a function or method. My page has only content.

How do I add that to localStorage or what do I do ?

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;

Where did you deploy to? If you are using a nginx proxy, remember to redirect all requests to index — Someone Special, Jun 13 '22 at 13:52
I have deployed to Netlify https://verdant-naiad-0ee37c.netlify.app/ — Manasseh Codes, Jun 13 '22 at 13:54
Does this answer your question? [Netlify renders 404 on page refresh (using React and react-router)](https://stackoverflow.com/questions/58065603/netlify-renders-404-on-page-refresh-using-react-and-react-router) — Someone Special, Jun 13 '22 at 13:57
"Refresh the _brown_"? What do you mean by that? Is that an autocorrect typo of _browser_ maybe? — Wyck, Jun 13 '22 at 14:01

score 2 · Accepted Answer · answered Jun 13 '22 at 13:58

2

Actually, when you deploy your react app to Netlify it shows error so, to resolve it Add a new file name _redirects inside your build folder & paste the below content-

/*    /index.html    200

Now push your new changes to server.

answered Jun 13 '22 at 13:58

Gulshan Aggarwal

954
1
7
13

How can I save this page to localStorage

1 Answers1