反応ルータが以前レンダリングされたページを再描画するのを防ぐには？

Question

私は反応ルータでいくつか問題があると思う。どのように反応ルータが以前にレンダリングされたページを再レンダリングするのを防ぐことができますか？私はこのようなルータのコードを持って

：私は最初のページにアクセスすると

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') 
 
);

、それはゲートウェイコンポーネントがレンダリングしまった、インデックスに当たります。次に、 "categories"リンクをクリックし、Categoriesコンポーネントがレンダリングされました。次に、「ホーム」リンクを再度クリックすると、コンポーネントゲートウェイが再レンダリングされました。状態はリセットされました。これは本当にイライラしています。私はなぜその状態がリセットされたのか理解できませんでした。

解決方法はありますか？

Answer 1

保存したい状態がある場合は、コンポーネントの状態（またはreduxを使用する場合はredux状態）など、どこかに保存する必要があります。

リアクションでは、コンポーネント内に関数shouldComponentUpdate()を定義して、ReactがDOMを再レンダリングしないようにすることができます。しかし、反応ルータの場合、最初のルートのDOMは（隠されているだけでなく）破壊されているため、再レンダリングする必要があります。