react如何做页面缓存？ 类似vue中的keep-alive

react-router-cache-route 解决react页面缓存（返回列表不更新）

react-router-dom本身是不支持的，需要引入react-router-cache-route

npm install --save react-router-cache-route

import React from 'react';
import { BrowserRouter as Router,Route} from 'react-router-dom';
import CacheRoute,{ CacheSwitch } from 'react-router-cache-route'

import Login from './Login'
import Me from './Me'
import Tongji from './Tongji'
import Gonghuo from './Gonghuo'
import GonghuoDetails from './GonghuoDetails'
import Qudao from './Qudao'
import QudaoDetails from './QudaoDetails'

function App() {
  return (
    <>
      <Router>
          <CacheSwitch>
	          <Route path='/login' exact component={Login} />
	
	          <Route path='/' exact component={Me} />
	          <Route path='/tongji' exact component={Tongji} />
	          <CacheRoute path='/gonghuo' exact component={Gonghuo} />   //页面被缓存了
	          <Route path='/gonghuoDetails/:id' exact component={GonghuoDetails} />
	          <Route path='/qudao' exact component={Qudao} />
	          <Route path='/qudaoDetails' exact component={QudaoDetails} />
          </CacheSwitch>
      </Router>
    </>
  );
}


export default App;