Reactjs 如何在使用React上下文时在路由器内部传递道具

我有一个程序，其中Product.js只显示一个带有

addToCart

按钮的项目列表。在Cart.js中，我试图只显示我选择的项目。以下是文件：

App.js

import './App.css';

import React,{useState} from 'react';
import {
  Route,
  BrowserRouter as Router,
  Switch,
} from 'react-router-dom';

import Cart from './components/Cart';
import Product from './components/Product';
import {ProductProvider} from './ItemListContext';

function App() {
  const [cart, setCart]= useState([]);

  const addToCart=(product)=>{
   
    setCart([...cart, {...product}])
  
   
}
console.log(cart)
  

  return (

        <div className="App">
    <ProductProvider>
         <Router>
           <Switch>
          <Route path="/" exact
             render ={()=> < Product addToCart={addToCart}/>}
        />
       <Route path="/cart/"  exact
          render ={()=> < Cart cart = {cart}   />}
        />
</Switch>
        </Router>
    </ProductProvider>
  </div>
  );
}

export default App;

这个程序运行得很好。

---

所以我的问题是，我的路线选择正确吗？这是通过

购物车

道具的正确方法吗？

路线没有问题，您可以在上面添加

链接

，它可以按预期工作

。。。


家


运货马车


...

---

当您通过在浏览器上键入该链接直接导航到

/cart

时，您的

应用程序将重新呈现，然后
cart
设置为空数组，您应该将其存储在存储器中以防止出现该问题。
签出在第294行上构建的条带示例应用程序。他们正在通过他们的路线穿越这个州。非常感谢。我真的很感激你帮助我。
import React,{useContext, useState} from 'react';
import {ProductContext} from '../ItemListContext';

export default function Product({addToCart}) {

    const [products, setProducts] = useContext(ProductContext) 

    return(
        <div className="main-page">
            products
        
        <h1>Product Page </h1>
        
        <div className="products" >
         {products.map((product,  idx)=>(
             <div key={idx}>
            <h3>{product.name} </h3>
           <img src= {product.image} /> cost = {product.cost} 
             <button onClick={()=>addToCart(product)}
              >Add to Cart</button>
             </div>

         ))}
         </div>
         <div>
   
         </div>
        </div>
    )
}


import React,{createContext, useState} from 'react';

export const ProductContext = createContext();

export  function ProductProvider(props) {

    const [products, setProducts]=useState([
        {
            name: 'iPhone',
            cost : '$899.99',
            image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQB6BMWrPXA9KyTtxa6o600mjeUNJ7zSXgaNt--FDCR6YjQ4XWS5G1J3dSF5ChurfQEGxorkxYs&usqp=CAc',
          },
          {
            name: 'Samsung',
            cost : '$599.99',
            image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQUGMCcF3_XBIKH5Dja-9iCkRP4CSA-CYaylQ&usqp=CAU'
          }
    ])

    return (
        <div>
            <ProductContext.Provider value={[products, setProducts]} >
                {props.children}
            </ProductContext.Provider>
            
        </div>
    )
}


import React from 'react';

export default function Cart({cart}) {

    console.log()
    return (
        <div className="cart">
        <h1>cart {cart.length}</h1>
         <div className="products" >
          
             {cart.map((product,  idx)=>(
            <div key={idx}>
                <h3>{product.name}</h3>
                <h4>{product.cost}</h4>
                <img src={product.image} alt = {product.name} />
        </div>
      ))} 

      </div> 
      <div>

      </div>
        </div>
    )
}


import './App.css';

import React,{useState} from 'react';
import {
  Route,
  BrowserRouter as Router,
  Switch,
} from 'react-router-dom';

import Cart from './components/Cart';
import Product from './components/Product';
import {ProductProvider} from './ItemListContext';

function App() {
  const [cart, setCart]= useState([]);

  const addToCart=(product)=>{
   
    setCart([...cart, {...product}])
  
   
}
console.log(cart)
  

  return (
  <div className="App">
     <ProductProvider>
     < Product  addToCart={addToCart}/>
     <Cart cart={cart} />
     </ProductProvider>
   </div>
  );
}

export default App;