如何避免在路由改变时组件重新渲染，这类似于vuejs中的keep-alive？

 return class extends React.Component {

   state = {

     keepAliveData: null,

   };

   componentWillUnmount() {

     // 组件被卸载时保存状态

     this.setState({ keepAliveData: this.props });

   }

   render() {

     const { keepAliveData } = this.state;

     if (keepAliveData) {

       // 组件重新挂载时恢复状态

       return <WrappedComponent {...keepAliveData} />;

     }

     return <WrappedComponent {...this.props} />;

   }

 };

 return (

   <Router>

     <div>

       <Route

         exact

         path="/"

         render={(props) => (

           <Home {...props} />

         )}

       />

       <Route

         path="/about"

         render={(props) => (

           <About {...props} />

         )}

       />

       <Route

         path="/contact"

         render={(props) => (

           <Contact {...props} />

         )}

       />

     </div>

   </Router>

 );