Я создаю навигацию master-detail, как в примере здесь пример реактивного маршрутизатора;
У меня есть компонент контейнера OneCheckpointContainer
, который отображает панель навигации CheckpointNav
(ссылки), и компонент данных OneCheckpointData
(этот парень извлекает данные при загрузке и отображает OneCheckpointView
.
Когда я нажимаю одну из ссылок в CheckpointNav
, ничего не происходит, кроме изменения URL-адреса в браузере. Только когда я обновлю страницу, новые данные будут извлечены, а затем в дочернем представлении отобразится новый компонент. (ошибок тоже нет)
Я не уверен, что эта ошибка связана с тем, что дочерний компонент также отвечает за получение данных, а также за представление.
Вот как у меня настроены маршруты:
<Route path="/modules/:id" component={OneCheckpointContainer}>
<Route path="/modules/:id/checkpoints/:cp_id" component={OneCheckpointData} />
</Route>
Контейнер OneCheckpoint
import React from 'react';
import CheckpointNav from './CheckpointNav';
class OneCheckpointContainer extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
checkpoints: null,
user: null
};
}
componentWillMount() {
this.loadCheckpoints();
this.context.getUser((data) => this.setState({ user: data }));
}
loadCheckpoints() {
$.ajax({
url: `/api/v1/modules/student/${this.props.params.id}/checkpoints`,
method: 'GET',
}).done((data) => {
this.setState({ checkpoints: data });
});
}
render() {
return (
<div>
<div className="col-xs-3">
<CheckpointNav mid={this.props.params.id} checkpoints={this.state.checkpoints} />
</div>
<div className="col-xs-9">
{ this.props.children || <div>No Children Yet</div>}
</div>
</div>
)
}
}
OneCheckpointContainer.displayName = OneCheckpointContainer;
OneCheckpointContainer.contextTypes = {
getUser: React.PropTypes.func.isRequired
};
export default OneCheckpointContainer;
Вот CheckpointNav, хотя я не верю, что ошибка здесь:
import React from 'react';
import NavLink from '../widgets/NavLink';
const CheckpointNav = (props) => {
const checkpointList = props.checkpoints && props.checkpoints.length > 0 ?
props.checkpoints.map((item) => {
return <li key={item.cp._id} className="list-group-item">
<NavLink className="nav-link" to={"/modules/" + props.mid + "/checkpoints/" + item.cp._id}>
{ item.cp.title}</NavLink></li>
}) : <div>No CPS</div>;
return (
<div className="card one-module-card">
<div className="card-block modules-card-body">
<ul className="list-group tags-group">
{ checkpointList }
<li className="list-group-item new-cp"><NavLink className=""
to={'/post/checkpoint/' + props.mid}
>
New Checkpoint
</NavLink></li>
</ul>
</div>
</div>
);
};
export default CheckpointNav;
OneCheckpointData не извлекает новые данные и не отображает новые, пока я не обновлю данные
import React from 'react';
import CheckpointView from './CheckpointView';
class OneCheckpointData extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
checkpoint: null,
user: null
};
}
componentWillMount() {
this.loadCheckpoint();
this.context.getUser((data) => this.setState({ user: data }));
}
loadCheckpoint() {
$.ajax({
url: `/api/v1/modules/three/cp/${this.props.params.cp_id}`,
method: 'GET',
}).done((data) => {
this.setState({ checkpoint: data });
});
}
render() {
return this.state.checkpoint ? <CheckpointView user={this.state.user} checkpoint={this.state.checkpoint} /> : null;
}
}
OneCheckpointData.displayName = OneCheckpointData;
OneCheckpointData.contextTypes = {
getUser: React.PropTypes.func.isRequired
};
export default OneCheckpointData;
** Я не упомянул OneCheckpointView, так как он не имеет значения **