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: - + )