Как добавить значения фильтра в 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 не используется.

0 ответов

Другие вопросы по тегам