TheDobrevic
Kilopat
Daha fazla
- Sistem Özellikleri
- CPU: AMD R5-5600
GPU: SAPPHIRE RX7900 GRE NITRO+ 16GB
Anakart: MSI B550M Pro-Vdh Wifi
RAM: 2x8 DDR4 T-Force 3200mhz
HDD: SEAGATE 1TB 7200RPM
SSD: Hyperx Fury 480GB & KIOXIA EXCERIA PRO 1TB
Monitör: MSI G27C4 & MSI G241
Kasa: Cooler Master MB511
PSU: FSP HYPER 80+ 700W
- Cinsiyet
- Erkek
- Meslek
- Kalıp Tasarım Mühendisi, Metalurji ve Malzeme Mühendisi
BTK Akademi'deki React derslerini inceliyorum şu sıralar. Router derslerine geldiğimizde versiyon farklılığı nedeniyle birkaç komut kaldırılmış ve bu nedenle dersteki kodlar çalışmamakta. Aşağıda yazdığım kodlarda hata veriyor. Anlayan biri neresinin ve neden hata verdiğini kısaca açıklayabilir mi? Derste <Switch> kullanılıyor ancak anladığım kadarıyla yeni versiyonlarda bu <Routes>'e dönüşmüş.
index.js
app.js
Hatalar
index.js
Kod:
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import "bootstrap/dist/css/bootstrap.min.css";
import "alertifyjs/build/css/alertify.min.css";
import { BrowserRouter } from "react-router-dom";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
app.js
Kod:
import React, { Component } from "react";
import { Container, Row, Col } from "reactstrap";
import CategoryList from "./CategoryList";
import Navi from "./Navi";
import ProductList from "./ProductList";
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: [] };
changeCategory = (category) => {
this.setState({ currentCategory: category.categoryName });
this.getProducts(category.id);
};
componentDidMount() {
this.getProducts();
}
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 }));
};
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 });
};
render() {
let productInfo = { title: "ProductList" };
let categoryInfo = { title: "CategoryList" };
return (
<div>
<Container>
<Navi removeFromCart={this.removeFromCart} cart={this.state.cart} />
<Row>
<Col xs="4">
<CategoryList
currentCategory={this.state.currentCategory}
changeCategory={this.changeCategory}
info={categoryInfo}
/>
</Col>
<Col xs="8">
<Routes>
<Route
exact
path="/"
element={
<ProductList
products={this.state.products}
addToCart={this.addToCart}
currentCategory={this.state.currentCategory}
info={productInfo}
/>
}
/>
<Route exact path="/cart" element={<CartList />} />
<Route exact path="*" element={<NotFound />} />
</Routes>
</Col>
</Row>
</Container>
</div>
);
}
}
Hatalar