Я настраиваю приложение для социальной сети студента.Я использую реагируй, перевожу и реагируй маршрутизаторМой компонент списка каналов хранит идентификатор студента из URL.Когда я использую маршрутизатор React, мой компонент не обновляется.
Я прочитал эту статью https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md и попытался обернуть свои компоненты в withRouter.
index.js:
ReactDOM.render(
<Provider store={store}>
<Router>
<Route path="/" component={App} />
<Route exact path="/sign/In" component={SignIn} />
<Route exact path="/sign/Up" component={SignUp} />
</Router>
</Provider>, document.getElementById('root'));
App.js:
class App extends Component {
render() {
return (
<Router id="Page" >
<div className={this.props.AppStore.Theme}>
<header>
<NavBar />
</header>
<Route exact path="/" component={HomePage} />
<Route exact path="/@:id" component={feedpage} />
</div>
</Router>
);
}
}
const mapStateToProps = (state) => {
return state
}
export default withRouter(connect(mapStateToProps)(App));
feedPage.js:
class feedPage extends Component {
componentDidMount() {
const {dispatch} = this.props;
API.requireFeed(this.props.match.params.id,"profil",20)
.then((res) => {
if(res){
dispatch(postList(res));
}
})
}
render() {
return (
<div id="Page">
<div id="mainPage">
<div id="centralCard">
{this.props.postList.map((element) => (
<div>
<Link to={'/@'+element.Pseudo}>{element.Pseudo}</Link>
<p>{element.Content}</p>
</div>
))}
</div>
</div>
</div>
);
}
}
const mapStateToProps = (state) => {
return state
}
export default withRouter(connect(mapStateToProps)(feedPage));
Я ожидаю обновлениякаждого компонента каждый раз, когда я нажимаю на ссылку на другой feedPage.
У кого-то есть идея о том, как решить проблему, мне бы это понравилось:)