离开并返回页面ReactJS时保存一个道具

Question

我有一个＜code＞用户名

return <Redirect to={{
    pathname: "/products",
    state: username
  }}/>  

然后我有一个

当我回到“产品列表”

这是我希望存储用户名的“产品列表”路由的完整代码：

import React, {useState, useEffect} from 'react';
import './Products.css';
import {Link} from 'react-router-dom';

function Products(props) {

  const [products, setProducts] = useState([]);

  useEffect(() => {
    const fetchProducts = async () => {

      const data = await fetch("https://example.com/products");
  
      const products = await data.json();
      console.log(products);
      setProducts(products);
    };
    fetchProducts();
  }, []);

  let username = props.location.state;

  return (   
    <div> 
      <p className = "HelloUser">Hello, {username}</p>
      <p className = "ProductTitle">Our Selection</p>
      <div className = "ProductGrid">
        {products.map(product =>(
        <div className = "ProductBox" key={product.id}>
          <img className ="ProductImage" src={product.image} alt="did not load"/>
          <p className ="ProductName">{product.name}</p>
          <p className ="ProductDiscountedPrice">{"£" + (Math.round(product.discountedPrice * 100) / 100).toFixed(2)}</p>
          <p className ="ProductPrice">{"£" + (Math.round(product.price * 100) / 100).toFixed(2)}</p>
          <Link to={`/products/${product.id}`} className="MoreInfoButton">More info</Link>
        </div>
        ))}
      </div>
    </div>
  )
}

export default Products;




Answer 1

已解决：通过将用户名道具进一步传递给“单个产品”组件来解决它。这样，当我回击“产品列表”时，用户名就会保留下来。

或者更好地在sessionStorage中存储用户名。