Есть ли в React-Router элегантный способ очистки данных, отображаемых текущим компонентом, при совпадении одного из его маршрутов?

Question

У меня есть компонент PastIssues, в котором перечислены все предыдущие выпуски журнала.Выходные данные компонента представляют собой упорядоченный список, где каждый элемент представляет собой год выпуска, за которым следует сезон.Например:

1. Весна: 2014

2. Осень: 2015

Каждый из этих пунктовСсылка, которая указывает на определенный путь.Я динамически добавил к этому компоненту, так что мой компонент ShowArticleInfo будет отображаться.Моя проблема заключается в том, что, когда пользователь нажимает одну из ссылок, мой компонент ShowArticleInfo отображается, но только под упорядоченным списком.Я бы хотел, чтобы мой упорядоченный список исчез, чтобы единственным оставшимся компонентом был ShowArticleInfo.

Поэтому, прежде чем пользователь щелкнет что-либо, я хочу получить список ссылок, по одной на каждую статью (в приведенном выше примере).После того, как пользователь щелкнет один из них, я хочу, чтобы список исчез, и отображалась только ShowArticleInfo.

Есть ли элегантный способ сделать это?

Answer 1

Используйте локальное хранилище, чтобы установить ключ со значением true

   componentDidMount(){
   localStorage.setItem('loaded','true');
   }

и очистить локальное хранилище, когда вы размонтируете компонент ShowArticleInfo.В вашем списке упорядоченных компонентов визуализации.

   render(){
         let loaded = localStorage.getItem('loaded');
         return(
               <div style={{display:{loaded ==='true' ? 'none':'block'}}>
               </div>
             )
           }

Для получения дополнительной информации о localalstorage MDN / localstorage .