У меня есть эта программа, в которой 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;

Product.js

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>
    )
}

ItemListContext.js

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>
    )
}

Cart.jsx

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>
    )
}

Я пытаюсь создать ссылку на маршрутизатор, localhost:3000/ показывает список продуктов, но localhost:3000/cart/ не показывает элементы корзины.

Однако, если я удалю маршрутизаторы и запускаю программу следующим образом: 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>
     < Product  addToCart={addToCart}/>
     <Cart cart={cart} />
     </ProductProvider>
   </div>
  );
}

export default App;

Программа работает нормально. Итак, мой вопрос: правильно ли я выполняю маршрутизацию? Это правильный способ передать опору cart?

0
saran 9 Дек 2020 в 04:54

1 ответ

Лучший ответ

Нет проблем с маршрутизацией, вы можете добавить Link над ним, и он будет работать, как ожидалось https://codesandbox.io/s/solitary-river-hvv2q

      ...
      <ProductProvider>
        <Router>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/cart">Cart</Link>
            </li>
          </ul>
          <Switch>
            <Route path="/" exact>
              <Product addToCart={addToCart} />
            </Route>
            <Route path="/cart/" exact>
              <Cart cart={cart} />
            </Route>
          </Switch>
        </Router>
      </ProductProvider>
      ...

Когда вы напрямую переходите к /cart, набирая эту ссылку в браузере, ваш App повторно визуализируется, а затем cart устанавливается на пустой массив, вы должны сохранить его в хранилище, чтобы предотвратить эту проблему.

1
tuan.tran 9 Дек 2020 в 03:09