У меня есть некоторый компонент который задан <Route path="/news" component={C}/>
и <Route exact path="/news/page/:number/" component={C}/>
, если компонент принимает параметр number.
Cам компонент:
import { Component } from 'react'
import { Link } from 'react-router-dom'
export class C extends Component{
constructor(props){
super(props);
let p;
if (typeof this.props.match.params.number == "undefined"){
p = 1;
}else{
p = parseInt(this.props.match.params.number);
}
this.state = { page: p, news: []};
}
componentWillMount() {
const setState = this.setState.bind(this);
const p = this.state.page;
$.ajax({
type: "POST",
url: "news.php",
data: { page: p},
success: function(data){
setState(data);
},
});
}
render(){
let buttons, n;
let news = this.state.news;
let pageb = this.state.page-1;
let pagef = this.state.page+1;
console.log(pageb);
console.log(pagef);
if(news.length > 0){
n = <div>
{news.map(function(n, i){
return (<div class="news-block" key={i}>
<Link to={`/news/post/${n.id}/`}><h5>{n.theme}</h5></Link>
<small>
<Link to={`/user/${n.author}/`}>
{n.author}
</Link>, {n.date_of_create}
</small>
<p>{n.about}</p>
</div>);
})}
</div>;
if(pageb > 0 )
buttons = <Link to={`/news/page/${pageb}/`} > ← Назад</Link>;
buttons = <div> {buttons} <Link to={`/news/page/${pagef}/`}>Вперед →</Link></div>;
}else{
n = <p>Пока здесь нет новостей! ;)</p>;
}
return(
<div>
{n}
<div>{buttons}</div>
</div>
);
}
}
При нажимании по <Link>
, который ссылает компонент на самого себя но уже с параметрами, компонент не перерисовывается. Что я делаю не так?