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

Question

我有一个username属性，已使用它从“登录”路由传递到“产品列表”路由return <Redirect to={{    pathname: "/products",    state: username  }}/>  然后我有一个 <Link to={'/products/${product.id}'}>More info</Link>将我从“产品列表”发送到“单个产品”的方法。当我返回“产品列表”时<Link to={'/products'}>Back</Link>，用户名消失了。有没有办法保留用户名，以便当用户登录并在路线之间来回移动时，它会继续被存储？这是我希望存储用户名的“产品列表”路线的完整代码：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 中。