[WIP] try keep alive

examples/func-test/.umirc.js

@@ -11,5 +11,16 @@ export default {
       },
     ],
   ],
+  routes: [
+    {
+      path: '/',
+      component: './index',
+    },
+    {
+      path: '/list',
+      component: './list',
+      keepAlive: true,
+    },
+  ],
   exportStatic: true,
 };

examples/func-test/src/pages/index.js

@@ -6,7 +6,7 @@ export default () => {
   return (
     <Card>
       <div>hello world</div>
-      <Link to="/test">test</Link>
+      <Link to="/list">test</Link>
     </Card>
   );
 };

examples/func-test/src/pages/list.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import Link from 'umi/link';
+
+export default () => {
+  const list = Array(200)
+    .fill('')
+    .map((item, index) => {
+      return (
+        <Link to={`/`} key={index}>
+          <div>Item - {index}</div>
+        </Link>
+      );
+    });
+  const desc = (
+    <div>
+      <p>
+        This page of route is using <code>LiveRoute</code> with{' '}
+        <code>livePath</code>.
+      </p>
+      <p>
+        In this page, the list page will not be unmounted on item detail page
+        and will be unmounted when enter into other pages such as home page.
+      </p>
+      <p>
+        The count number above is a sign of component live state. It will be
+        reset to 0 when the component of Route unmounted. You can scroll the
+        page and it will be restored when backing from item detail page.
+      </p>
+      <p>Feel free to try it.</p>
+    </div>
+  );
+  return (
+    <div>
+      {desc}
+      {list}
+    </div>
+  );
+};

packages/umi/package.json

@@ -12,6 +12,7 @@
     "dotenv": "6.2.0",
     "is-windows": "1.0.2",
     "lodash": "4.17.11",
+    "react-live-route": "^3.0.7",
     "react-loadable": "5.5.0",
     "resolve-cwd": "2.0.0",
     "semver": "5.6.0",

packages/umi/src/renderRoutes.js

@@ -1,6 +1,8 @@
 import React from 'react';
-import { Switch, Route, Redirect } from 'react-router-dom';
+import { Switch, Route, Redirect, withRouter } from 'react-router-dom';
+import NotLiveRoute from 'react-live-route';
 
+const LiveRoute = withRouter(NotLiveRoute);
 const RouteInstanceMap = {
   get(key) {
     return key._routeInternalComponent;
@@ -21,17 +23,33 @@ const RouteWithProps = ({
   render,
   location,
   sensitive,
+  keepAlive,
   ...rest
-}) => (
-  <Route
-    path={path}
-    exact={exact}
-    strict={strict}
-    location={location}
-    sensitive={sensitive}
-    render={props => render({ ...props, ...rest })}
-  />
-);
+}) => {
+  if (keepAlive) {
+    return (
+      <LiveRoute
+        path={path}
+        exact={exact}
+        strict={strict}
+        location={location}
+        alwaysLive={true}
+        sensitive={sensitive}
+        render={props => render({ ...props, ...rest })}
+      />
+    );
+  }
+  return (
+    <Route
+      path={path || '/umi404'}
+      exact={exact}
+      strict={strict}
+      location={location}
+      sensitive={sensitive}
+      render={props => render({ ...props, ...rest })}
+    />
+  );
+};
 
 function getCompatProps(props) {
   const compatProps = {};
@@ -86,7 +104,7 @@ export default function renderRoutes(
   switchProps = {},
 ) {
   return routes ? (
-    <Switch {...switchProps}>
+    <div {...switchProps}>
       {routes.map((route, i) => {
         if (route.redirect) {
           return (
@@ -107,6 +125,7 @@ export default function renderRoutes(
             exact={route.exact}
             strict={route.strict}
             sensitive={route.sensitive}
+            keepAlive={route.keepAlive}
             render={props => {
               const childRoutes = renderRoutes(
                 route.routes,
@@ -140,6 +159,6 @@ export default function renderRoutes(
           />
         );
       })}
-    </Switch>
+    </div>
   ) : null;
 }