diff --git a/examples/with-keep-alive/README.md b/examples/with-keep-alive/README.md
index 55dab7d82d..deab322b7a 100644
--- a/examples/with-keep-alive/README.md
+++ b/examples/with-keep-alive/README.md
@@ -1,6 +1,6 @@
# with-keep-alive
-Experimental keep-alive with React 18 ``.
+Experimental keep-alive with React 18 ``.
## How to debug
@@ -15,9 +15,11 @@ $ cd packages/runtime && yalc publish --push
Then, install the example dependencies.
```bash
-$ cd examples/with-keep-alive && yarn install
+$ cd examples/with-keep-alive
$ yalc add @ice/app @ice/runtime
+$ yarn install
+
$ npm run start
```
diff --git a/examples/with-keep-alive/package.json b/examples/with-keep-alive/package.json
index cceb02e949..6a4359d954 100644
--- a/examples/with-keep-alive/package.json
+++ b/examples/with-keep-alive/package.json
@@ -7,13 +7,15 @@
"build": "ice build"
},
"dependencies": {
- "@ice/runtime": "alpha",
- "react": "experimental",
- "react-dom": "experimental"
+ "react": "0.0.0-experimental-0cdfef19b-20231211",
+ "react-dom": "0.0.0-experimental-0cdfef19b-20231211"
},
"devDependencies": {
- "@ice/app": "alpha",
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.2"
+ },
+ "resolutions": {
+ "react": "0.0.0-experimental-0cdfef19b-20231211",
+ "react-dom": "0.0.0-experimental-0cdfef19b-20231211"
}
}
diff --git a/packages/runtime/src/KeepAliveOutlet.tsx b/packages/runtime/src/KeepAliveOutlet.tsx
index f8a7a43eea..a69a7081f4 100644
--- a/packages/runtime/src/KeepAliveOutlet.tsx
+++ b/packages/runtime/src/KeepAliveOutlet.tsx
@@ -2,11 +2,11 @@ import React, { useState, useEffect } from 'react';
import { useOutlet, useLocation } from 'react-router-dom';
// @ts-ignore
-const Offscreen = React.unstable_Offscreen;
+const Activity = React.unstable_Activity;
// ref: https://leomyili.github.io/react-stillness-component/docs/examples/react-router/v6
export default function KeepAliveOutlet() {
- if (!Offscreen) {
+ if (!Activity) {
throw new Error('`` now requires react experimental version. Please install it first.');
}
const [outlets, setOutlets] = useState([]);
@@ -32,9 +32,9 @@ export default function KeepAliveOutlet() {
{
outlets.map((o) => {
return (
-
+
{o.outlet}
-
+
);
})
}
diff --git a/website/docs/guide/advanced/keep-alive.md b/website/docs/guide/advanced/keep-alive.md
index adca65784c..65c08257db 100644
--- a/website/docs/guide/advanced/keep-alive.md
+++ b/website/docs/guide/advanced/keep-alive.md
@@ -47,13 +47,13 @@ export default function Layout() {
## 缓存其他组件
-除了缓存路由组件,还可以直接使用 React 18 提供的实验特性 `` 组件,进一步缓存更细粒度的组件。
+除了缓存路由组件,还可以直接使用 React 18 提供的实验特性 `` 组件,进一步缓存更细粒度的组件。
```tsx
import React from 'react';
// @ts-ignore
-const Offscreen = React.unstable_Offscreen;
+const Activity = React.unstable_Activity;
export default function Home() {
const [auth, setAuth] = React.useState('admin');
@@ -65,12 +65,12 @@ export default function Home() {
<>
-
+
Admin Name:
-
-
+
+
User Name:
-
+
>
>
)