Question 385379 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – I can't render my ProductList wih react-route-dom

<Col xs="9">
  <Routes>
    <Route
      exact
      path="/"
      render={(props) => (
        <ProductList
          {...props}
          products={this.state.products}
          addToCart={this.addToCart}
          currentCategory={this.state.currentCategory}
          info={productInfo}
        />
      )}
    />

This is my App.js file. it doesn’t work.

I looked react-router-dom old version and some place we must replace switch to routes. But any changes didn’t change the result. I can’t see my ProductList component.

    "react-router-dom": "6.23.0"
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I know this version but it didn't work, here is my whole code attached.

    Git: https://github.com/enesagu/node.js_meteor.js_react/blob/main/react_project/intro/src/App.js

    App.js:

    import React, { Component } from "react";
import Navi from "./Navi";
import CategoryList from "./CategoryList";
import ProductList from "./ProductList";
import "bootstrap/dist/css/bootstrap.min.css";
import { Container, Row, Col } from "reactstrap";
import alertify from "alertifyjs";
import { Routes, Route } from "react-router-dom";
import NotFound from "./NotFound";
import CartList from "./CartList";
export default class App extends Component {
  state = { currentCategory: "", products: [], cart: [] };

  componentDidMount() {
    this.getProducts();
  }

  changeCategory = (category) => {
    this.setState({ currentCategory: category.categoryName });
    this.getProducts(category.id);
  };

  getProducts = (categoryId) => {
    let url = "http://localhost:3000/products";
    if (categoryId) {
      url += "?categoryId=" + categoryId;
    }
    fetch(url)
      .then((response) => response.json())
      .then((data) => this.setState({ products: data }))
      .catch((error) => console.error("Error:", error));
  };

  addToCart = (product) => {
    let newCart = this.state.cart;
    var addedItem = newCart.find((c) => c.product.id === product.id);
    if (addedItem) {
      addedItem.quantity += 1;
    } else {
      newCart.push({ product: product, quantity: 1 });
    }
    this.setState({ cart: newCart });
    alertify.success(product.productName + " added to cart!", 2);
  };

  removeFromCart = (product) => {
    let newCart = this.state.cart.filter((c) => c.product.id !== product.id);
    this.setState({ cart: newCart });
    alertify.error(product.productName + " removed to cart!", 2);
  };

  render() {
    let productInfo = { title: "ProductList" };
    let categoryInfo = { title: "CategoryList" };

    return (
      <div>
        <Container>
          <Navi removeFromCart={this.removeFromCart} cart={this.state.cart} />
          <Row>
            <Col cs="3">
              <CategoryList
                currentCategory={this.state.currentCategory}
                changeCategory={this.changeCategory}
                info={categoryInfo}
              />
            </Col>
            <Col xs="9">
              <Routes>
                <Route
                  exact
                  path="/"
                  render={(props) => (
                    <ProductList
                      {...props}
                      products={this.state.products}
                      addToCart={this.addToCart}
                      currentCategory={this.state.currentCategory}
                      info={productInfo}
                    />
                  )}
                />

                <Route exact path="/cart" element={<CartList />} />
                <Route path="*" element={<NotFound />}></Route>
              </Routes>
            </Col>
          </Row>
        </Container>
      </div>
    );
  }
}

  2. 0

    It works now thank you

    In React Router DOM version 6, the component is used to define your routes, and the component is used to render a component for a specific route. Here’s how you can update your App.js file to work with React Router DOM version 6:

    import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import ProductList from './ProductList';

class App extends React.Component {
  state = {
    products: [],
    currentCategory: '',
  };

  addToCart = (product) => {
    // Add logic to add product to cart
  };

  render() {
    return (
      <Router>
        <Routes>
          <Route
            exact
            path="/"
            element={<ProductList products={this.state.products} addToCart={this.addToCart} currentCategory={this.state.currentCategory} />}
          />
        </Routes>
      </Router>
    );
  }
}

export default App;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search