سلام وقت بخیر
یه component دارم که لینکش به این صورت کار میکنه "http://localhost:۳۰۰۰/category/۱" داخل همین component هم از دستور this.props.history.push('/movie/' + category.id.toString()) برای لینک کردن به component دیگه استفاده کردم اما موضوع اینه که اگر برای اولین بار این آدرس "http://localhost:۳۰۰۰/category/۱" باز بشه این دستور لینک داخلش هم کار میکنه اما وقتی که route من از "category/۱" میره به category/۲ این دستور this.props.history.push دیگه کار نمی کنه و همین category/۲ نشون میده. ممنون میشم یه راهنمایی به من بدید
اینم کد
import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';
import { fakeData } from '../../shared/models/fake-data';
import words_panel from '../../shared/words.json';
class Category extends Component {
params;
fakeDataService;
word = words_panel.category;
constructor(props) {
super(props);
this.state = {
loader: false,
category_data: [],
flex_data: null,
maxwidth_data: null,
height_data: null,
count_call: ۰,
cursor: ۰
}
this.fakeDataService = new fakeData();
this.moveCoursor = this.moveCoursor.bind(this);
}
componentDidMount() {
if (this.state.count_call === ۰) {
this.dynamicDivCalc();
this.setState({ count_call: ۱ })
}
this.params = this.props.match.params.id;
this.handleData(this.params);
window.addEventListener("keydown", this.moveCoursor);
}
componentWillReceiveProps(prevProps) {
this.params = prevProps.match.params.id;
this.handleData(this.params);
}
handleData(id) {
this.setState({ loader: true });
this.fakeDataService.getData(id).then(result => {
this.setState({ loader: false, category_data: result })
}).catch(err => {
this.setState({ loader: false })
throw err;
})
}
moveCoursor(e) {
let category, element_id;
let { cursor, category_data } = this.state;
let active_element = document.getElementsByClassName('is-active')[۰];
if (active_element) {
element_id = active_element.getElementsByClassName('item-image-wrapper')[۰].id;
}
if (element_id) {
for (let index = ۰; index < category_data.length; index++) {
if (category_data[index].id.toString() === element_id) {
category = category_data[index];
}
}
if (e.keyCode === ۳۹ && cursor > ۰) {
this.setState(prevState => ({
cursor: prevState.cursor - ۱
}))
} else if (e.keyCode === ۳۷ && cursor < category_data.length - ۱) {
this.setState(prevState => ({
cursor: prevState.cursor + ۱
}))
} else if (e.keyCode === ۱۳) {
this.props.history.push('/movie/' + category.id.toString())
}
} else {
console.log("id not found!");
}
}
checkStateCursor(e, index) {
this.setState({ cursor: index })
}
componentWillUnmount() {
window.removeEventListener("keydown", this.moveCoursor);
}
render() {
let { category_data, loader, flex_data, maxwidth_data, height_data, cursor } = this.state;
let words = this.word;
return (
<React.Fragment>
<div className="content content-category">
<div className="row rc-grid">
{loader ? 'loading' : category_data ? category_data.map((data, i) => {
return <div style={{ flex: flex_data, maxWidth: maxwidth_data }}
className="col-۶ col-lg-۴ col-xl-۳" key={data.id} onMouseEnter={(e) => this.checkStateCursor(e, i)}>
< NavLink className={["item-link", cursor === i ? 'is-active' : ''].join(" ")} to={{ pathname: '/movie/' + data.id }}>
<div id={data.id} className="item-image-wrapper">
<img style={{ height: height_data }} className="item-image" src={data.image} alt={data.title} />
</div>
<div className="item-info">
<h۶ className="item-fatitle">{data.title}</h۶>
</div>
</NavLink>
</div>
}) : <div className="col-sm-۱۲">{words.notfound}</div>}
</div>
</div >
</React.Fragment >
);
}
}
export default Category;
به فریدون ذوالقدر کمک کنید تا مشکل خودش را حل کند؛ اینطور میتوانیم با هم پیشرفت کنیم.
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟