ReactJS: сохранить состояние при навигации с помощью кнопки браузера

Question

У моего приложения есть две страницы, во-первых, главная страница, которая представляет собой список элементов, загруженных ajax и поддерживающих разбиение на страницы. когда вы нажимаете элемент в списке, он отображает новую страницу, показывает деталь элемента. Я использую react-router, и он отлично работает.

Однако, когда я нажимаю назад кнопку, я вернусь на домашнюю страницу, и все предыдущее состояние будет потеряно, мне придется снова ждать аякс-нагрузки и потерять разбивку на страницы.

Итак, как я могу улучшить это, пусть страница действует как обычная (когда вы нажимаете кнопку «Назад», вы можете вернуться в предыдущее состояние мгновенно, даже с той же позиции прокрутки), спасибо.

Answer 1

Я решил это сам, предоставляя модуль Store, который так:

// Store.js 

var o = {}; 

var Store = { 
    saveProductList: function(state) { 
    o['products'] = state; 
    }, 
    getProductList: function() { 
    return o['products']; 
    } 
};  

module.exports = Store; 

затем в компоненте домашней странице, нагрузка и сохранить состояние:

componentDidMount: function() { 
    var state = Store.getProductList(); 
    if (state) { 
    this.setState(state); 
    } else { 
    // load data via ajax request 
    } 
}, 

componentWillUnmount: function() { 
    Store.saveProductList(this.state); 
} 

это работает для меня.

Answer 2

Вы должны использовать динамические маршруты как в этом примере:

<Route name="inbox" handler={Inbox}> 
    <Route name="message" path=":messageId" handler={Message}/> 
    <DefaultRoute handler={InboxStats}/> 
</Route> 

Если изменить (дочерний компонент) MESSAGEID вы до сих пор в том же состоянии в папке Входящие (родительским) компонент.

Это будет выглядеть примерно так:

<Route name="search" path="/search/:query?/:limit?/:offset?" handler={Search} />