2017-02-14 11 views
3

Я думаю, что у меня есть проблема с реагирующим маршрутизатором. Как я могу предотвратить повторный рендеринг рендеринга ранее рендер-страницы?Как предотвратить повторный рендер рендеринга ранее обработанной страницы?

У меня есть маршрутизатор такой код:

class App extends React.Component { 
 
    render() { 
 
    return (
 
     <div> 
 
      <NavBar/> 
 
      {this.props.children} 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    (
 
     <Router history={hashHistory}> 
 
      <Route path="/" component={App}> 
 
       <IndexRoute component={Gateway} /> 
 
       <Route path="home" component={Gateway} /> 
 
       <Route path="categories" component={Categories} /> 
 
      </Route> 
 
     </Router> 
 
    ), document.getElementById('my-app') 
 
);

Когда я первый посетить страницу, она ударяется индекс, компонент шлюза получил оказаны. Затем я нажимаю ссылку «категории», а компонент «Категории» получает визуализацию. Затем, когда я снова нажимаю ссылку «домой», компонент Gateway получил повторную визуализацию. Его состояние получило СБРОС. Это действительно расстраивает, поскольку я не мог понять, почему его состояние было сброшено.

Есть ли решение для этого?

+0

Если вы не используете какое-либо государственное управление, такое как Redux, тогда вам нужно найти правильный способ разделить состояние между маршрутами, используя только React. Взгляните на ответ в этом сообщении: http://stackoverflow.com/questions/41108701/react-router-share-state-between-routes-without-redux или Google, что-то вроде «реагировать на общее состояние маршрутизатора между маршрутами» – Jayce444

ответ

1

Если есть какое-либо состояние, которое вы хотите сохранить, его следует хранить где-нибудь, например, состояние компонента (или состояние редукции, если вы используете сокращение).

В ответьте, вы можете определить функцию shouldComponentUpdate() внутри компонентов, чтобы заставить React не повторно визуализировать DOM. Но в случае реактивного маршрутизатора DOM первого маршрута уничтожается (а не просто скрывается) и поэтому следует повторно отображать.