Я настраиваю студенческое приложение социальной сети. Я использую реагирующий, редукционный и реагирующий маршрутизатор. Мой компонент списка фидов хранит идентификатор студента от URL-адреса. Когда я использую реагирующий маршрутизатор, мой компонент не обновляется.
Я прочитал эту статью 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'));
Приложение.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));
Я ожидаю обновления компонента каждый раз, когда я нажимаю ссылку на другую страницу канала.
У меня есть идея, как решить проблему, мне бы это понравилось :)
У вас должен быть только один компонент маршрутизатора (тот, что в index.js), вложенная маршрутизация в вашем компоненте приложения не требует другого маршрутизатора, просто объявите свои маршруты.