reactjs - Reactjs：react-router更改url链接而不重新加载页面&当（cart.lenght === 0）为真时没有加载

问题描述

我在我的项目中的购物车中包含了一个“付款”组件。当这个人完成选择他的产品时，他或她可以通过点击支付来支付。但是，如果我点击“付款”，尽管 url 发生了变化，但屏幕上什么也没有显示。此外，我尝试添加另一个测试组件，但它拒绝了。另外，我的条件“cart.length===0”有问题，如果这个条件被验证（true），我什么都不能显示。

谢谢您的帮助

{/* PAYMENT COMPONENT */}
import React, { Component } from "react";

class Payement extends Component {
  render() {
    return <h1 style={{ textAlign: "center" }}>PAYMENT COMPONENT</h1>;
  }
}

export default Payement;

{/* SECTION COMPONENT */}
import { Switch, Route } from "react-router-dom";
import Cart from "../Section/Cart";
import Details from "../Section/Details";
import Payement from "../Section/Payement";
import Products from "../Section/Products";

export class Section extends Component {
  render() {
    return (
      <section>
        <Switch>
          {/* <Route path="/" component={Products} exact /> */}
          <Route path={"/product"} component={Products} exact />
          <Route path={"/product/:id"} component={Details} />
          <Route path={"/cart"} component={Cart} />
          <Route path={"/payment"} component={Payement} />
        </Switch>
      </section>
    );
  }
}

export default Section;

{/* CART COMPONENT */}

import React, { Component } from "react";

import { DataContext } from "../layouts/Context";
import Colors from "./Colors";
import "../css/Cart.css";
import "../css/Details.css";
import { Link } from "react-router-dom";

export class Cart extends Component {
  static contextType = DataContext;

  componentDidMount() {
    console.log(this.context);
  }
  render() {
    const { cart } = this.context;
    const { increase, reduction, removeProduct } = this.context;

    if (cart.length === 0) {
      return <h2 style={{ textAlign: "center" }}>Nothings Product</h2>;
    } else {
      return (
        <>
          {cart.map((item) => (
            <div className="details cart" key={item._id}>
              <div className="box">
                <img src={item.src} alt="" />
                <div className="row">
                  <h1>{item.title}</h1>
                  <p className="price">{item.price * item.count} $</p>
                </div>
                <Colors colors={item.colors} />
                <p>{item.description}</p>
                <p>{item.content}</p>
                <div className="amount">
                  <button className="count" onClick={() => reduction(item._id)}>
                    {" "}
                    -{" "}
                  </button>
                  <span>{item.count}</span>
                  <button className="count" onClick={() => increase(item._id)}>
                    {" "}
                    +{" "}
                  </button>
                </div>
              </div>
              <div className="delete" onClick={() => removeProduct(item._id)}>
                X
              </div>
            </div>
          ))}
          <div className="total">
            <Link to="/payment">Payement</Link>
            <h3>Total: 0</h3>
          </div>
        </>
      );
    }
  }
}

export default Cart;

{/* APP COMPONENT */}
import React from "react";
import { BrowserRouter as Router } from "react-router-dom";
import AppFooter from "./components/layouts/AppFooter";
import AppNavbar from "./components/layouts/AppNavbar";
import { DataProvider } from "./components/layouts/Context";
import Section from "./components/layouts/Section";

function App() {
  return (
    <div>
      <DataProvider>
        <Router>
          <AppNavbar />
          <Section />
          <AppFooter />
        </Router>
      </DataProvider>
    </div>
  );
}

export default App;

标签： reactjsif-statementredirectcomponentsreact-router-dom

reactjs - Reactjs：react-router更改url链接而不重新加载页面&当（cart.lenght === 0）为真时没有加载

问题描述

解决方案

推荐阅读