Как добавить значения фильтра в HashRouter
Давайте рассмотрим сценарий, где я использую HashRouter
import React from 'react'
import { Tabs, Tab } from 'react-bootstrap';
class UserList extends React.Component{
constructor(props, context) {
super(props, context);
this.state = {
startDate: moment().subtract(7, "days"),
endDate: moment().subtract(1, "days"),
results:[]
}
this.handleStartDateChange =this.handleStartDateChange.bind(this);
this.handleEndDateChange = this.handleEndDateChange.bind(this);
}
handleStartDateChange(date) {
this.setState({
startDate: date
});
}
handleEndDateChange(date) {
this.setState({
endDate: date
});
}
render() {
return (
<div>
<div id="fromDateContainer">
<label>From Date</label>
<DatePicker
selected={this.state.startDate}
onChange={this.handleStartDateChange}
dateFormat="YYYY/MM/DD"
maxDate={moment().subtract(1, "days")}
minDate={moment().subtract(15, "months")}
/>
</div>
<div id="toDateContainer">
<label>To Date</label>
<DatePicker
selected={this.state.endDate}
onChange={this.handleEndDateChange}
dateFormat="YYYY/MM/DD"
maxDate={moment().subtract(1, "days")}
minDate={moment().subtract(15, "months")}
/>
</div>
</div>
);
}
}
class TabbedComponent extends React.Component{
constructor(props, context) {
super(props, context);
this.handleSelect = this.handleSelect.bind(this);
this.state = {
key: 1
};
}
handleSelect(key) {
this.setState({ key });
}
render() {
return (
<Tabs
activeKey={this.state.key}
onSelect={this.handleSelect}
id="controlled-tab-example"
unmountOnExit={true}
className="myCustomClass"
>
<Tab eventKey={1} title="Users List">
<UserList/>
</Tab>
<Tab eventKey={2} title="Projects List">
Tab 2 content
</Tab>
</Tabs>
);
}
}
const App = () => {
return (
<Switch>
<Route exact path='/' component={TabbedComponent} />
<Route exact path='/userActivityDetails/:userID/:startDate/:endDate' component={UserActivityDetails} />
</Switch>
);
}
ReactDOM.render(
<HashRouter>
<App/>
</HashRouter>
,document.getElementById('appContainer')
);
Как вы видите, у меня есть фильтры даты на 1-й вкладке TabbedComponent. Когда пользователь перемещается между вкладками, значения фильтра теряются при повторной визуализации компонентов. Также, когда пользователь перенаправляется на компонент UserActivityDetails из UserList после щелчка по ссылке на, значение фильтра теряется. Как сохранить значения фильтров при использовании вкладок и при маршрутизации? Также я хочу поделиться ссылкой вместе с отфильтрованными датами, чтобы при доступе пользователя к списку пользователей по маршруту "/" фильтры результатов уже применялись к набору результатов.
PS: в настоящее время магазин Redux не используется.