diff --git a/zh-cn/react-router-dom.md b/zh-cn/react-router-dom.md
index 215ac37882bfff889e2194a6497249532e58ecba..2f8beaa6772db3e924bcd66ff6a7f370f180e3de 100644
--- a/zh-cn/react-router-dom.md
+++ b/zh-cn/react-router-dom.md
@@ -1,5 +1,5 @@
-> 模板版本：v0.1.3
+> 模板版本：v0.2.2
react-router-dom
@@ -38,9 +38,308 @@ yarn add react-router-dom@6.22.1
下面的代码展示了这个库的基本使用场景：
```tsx
-import React from "react";
-import { ScrollView } from "react-native";
-import { Route, Routes, MemoryRouter as Router } from "react-router-dom";
+import React from 'react';
+import {Suspense} from "react";
+import { Platform, StyleSheet, Text, TextInput, View, Button, ScrollView } from 'react-native';
+import {
+ Route, Routes, Navigate, Outlet, useLocation,
+ useNavigate,
+ useOutlet,
+ useRoutes,
+ MemoryRouter as Router,
+ Await,
+ useAsyncError,
+ useAsyncValue
+} from 'react-router-dom';
+
+const Home = () => {
+ const navigate = useNavigate();
+ const outlet = useOutlet();
+ const [messages, setMessages] = React.useState(false);
+ const [tasks, setTasks] = React.useState(false);
+ return (
+
+ Welcome to the Home page!
+
+ );
+};
+
+const HomeMessages = () => {
+ return (
+
+ Outlet Demo: HomeMessages page!
+
+ );
+};
+
+const HomeTasks = () => {
+ return (
+
+ Outlet Demo: HomeTasks page!
+
+ );
+};
+
+const Login = () => {
+ const navigate = useNavigate();
+ const [login, setLogin] = React.useState(false);
+ const [warning, setWarning] = React.useState(false);
+ const [username, setUsername] = React.useState('');
+ const location = useLocation();
+
+ return (
+
+ Welcome to the Login page!
+ {location.state?.stateTest}
+ {
+ setUsername(value);
+ setWarning(value.length == 0)
+ }} />
+ {warning && (username is empty.)}
+ "} onPress={() => {
+ if (username.length == 0) {
+ setWarning(true)
+ return
+ }
+ setLogin(true)
+ }} />
+ {login && ()}
+
+
+ );
+};
+
+
+const LocationTest = () => {
+ const location = useLocation();
+ return (
+
+ ---- {location.key.length == 0 ? "LocationTest page!" : location.key} ----
+ pathname:{location.pathname} search:{location.search} hash:{location.hash}
+
+ );
+};
+
+const UseRoutesTestHome = () => {
+ const location = useLocation();
+ return (
+
+ ---- UseRoutesTestHome home page! ----
+ pathname:{location.pathname} search:{location.search} hash:{location.hash}
+
+ );
+};
+
+
+const Index3 = () => {
+ const navigate = useNavigate();
+ const location = useLocation();
+ return (
+
+ ---- Index3 page! ----
+ `---- 如果跳转由navigate("/index3") navigate(-1),回返回上一个页面；如果由navigate(3)，则返回initialEntries 下标为2的页面 ----`
+
+ );
+};
+
+
+
+const Detail = () => {
+ const navigate = useNavigate();
+ const location = useLocation();
+ return (
+
+ {location.state?.name} logged in successfully! Detail page!
+
+ );
+};
+
+
+
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ marginTop: Platform.OS === 'ios' ? 50 : 5, margin: 10,
+ },
+ root: {
+ flex: 1,
+ },
+ webView: {
+ flex: 1,
+ },
+ link: {
+ padding: 10,
+ backgroundColor: 'lightblue',
+ },
+});
+
+function UseRoutesTest() {
+ let element = useRoutes([
+ {
+ path: "/",
+ element: ,
+ },
+ { path: "/locationTest", element: },
+ ]);
+ return element;
+}
+
+function UseRoutesTest2() {
+ const location = {
+ pathname: '/locationTest',
+ search: '?id=1&name=test',
+ hash: '#section1',
+ key: "UseRoutesTest2 page",
+ };
+ let element = useRoutes([
+ { path: "/locationTest", element: },
+ ], location);
+ return element;
+}
+
+function ErrorElement() {
+ const error:any = useAsyncError();
+ return (
+ 页面出错了：{error.message}
+ );
+}
+
+const DomUseAsyncError = () => {
+ const asyncLoadData =()=>{
+ return new Promise((resolve, reject) => {
+ setTimeout(() => {
+ resolve({message:'异步请求失败'})
+ }, 2000)
+ });
+ }
+
+ return (
+ home页
+ 加载中.....}>
+ }>
+ 加载成功
+
+
+ );
+};
+
+function SuccessElement(){
+ const result:any = useAsyncValue();
+ return (
+ 页面请求成功：{result.message}
+ );
+}
+
+const DomUseAsyncValue = () => {
+ const asyncLoadData =()=>{
+ return new Promise((resolve, reject) => {
+ // 异步操作，比如请求数据
+ setTimeout(() => {
+ resolve({message:'请求成功'})
+ }, 2000)
+ });
+ }
+
+ return (
+ home页
+ 加载中.....}>
+ }>
+
+
+
+ );
+};
const DomDemo = () => {
const initialEntries = [
@@ -49,15 +348,30 @@ const DomDemo = () => {
{ pathname: "/detail", state: { stateTest: "stateTestContent" } },
"/index3",
];
+ const location = {
+ pathname: '/locationTest',
+ search: '?id=1&name=test',
+ hash: '#section1',
+ key: "locationTest page",
+ };
+ const initialIndex = 0;
return (
-
+
+
+ } />
+
+
+
+
+
+
+
+
+
+
- }>
+ } >
} />
} />
@@ -66,10 +380,15 @@ const DomDemo = () => {
} />
+
+
+
+ s
+
+
);
};
-
export default DomDemo;
```
@@ -80,6 +399,7 @@ export default DomDemo;
本文档内容基于以下版本验证通过：
1. RNOH：0.72.13; SDK：HarmonyOS NEXT Developer Preview1; IDE：DevEco Studio 4.1.3.500; ROM：2.0.0.59;
+2. RNOH：0.72.27; SDK：HarmonyOS-Next-DB1 5.0.0.29(SP1); IDE：DevEco Studio 5.0.3.400; ROM：3.0.0.25;
## 属性
@@ -87,16 +407,20 @@ export default DomDemo;
> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
-以下属性已验证，详情见 [react-router-dom源库地址](https://github.com/remix-run/react-router)
+以下属性已验证，详情见 [react-router-dom源库地址](https://github.com/remix-run/react-router/tree/main/packages/react-router-dom)
**Hooks**
| Name | Description | Type | Required | Platform | HarmonyOS Support |
| ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | -------- | ----------------- |
-| useLocation | This hook returns the current [`location`](https://reactrouter.com/en/main/utils/location) object. This can be useful if you'd like to perform some side effect whenever the current location changes. | Function | NO | All | YES |
-| useNavigate | The `useNavigate` hook returns a function that lets you navigate programmatically, for example in an effect: | Function | NO | All | YES |
-| useOutlet | Returns the element for the child route at this level of the route hierarchy. This hook is used internally by < Outlet > to render child routes. | Function | NO | All | YES |
-| useRoutes | The useRoutes hook is the functional equivalent of < Routes >, but it uses JavaScript objects instead of < Route > elements to define your routes. These objects have the same properties as normal < Route > elements, but they don't require JSX. | Function | NO | All | YES |
+| useLocation | This hook returns the current [`location`](https://reactrouter.com/en/main/utils/location) object. This can be useful if you'd like to perform some side effect whenever the current location changes. | Function | NO | iOS/Android | YES |
+| useNavigate | The `useNavigate` hook returns a function that lets you navigate programmatically, for example in an effect: | Function | NO | iOS/Android | YES |
+| useOutlet | Returns the element for the child route at this level of the route hierarchy. This hook is used internally by < Outlet > to render child routes. | Function | NO | iOS/Android | YES |
+| useRoutes | The useRoutes hook is the functional equivalent of < Routes >, but it uses JavaScript objects instead of < Route > elements to define your routes. These objects have the same properties as normal < Route > elements, but they don't require JSX. | Function | NO | iOS/Android | YES |
+| useActionData | Returns the nearest ancestor Route error which could be a loader/action error or a render error. This is intended to be called from your. ErrorBoundary/errorElement to display a proper error message. | Function | NO | iOS/Android | YES |
+| useAsyncError | Allow the application to block navigations within the SPA and present the user a confirmation dialog to confirm the navigation Mostly used to avoid. using half-filled form data. This does not handle hard-reloads or. cross-origin navigations. | Function | NO | iOS/Android | YES |
+| useAsyncValue | Returns the error from the nearest ancestor < Await /> value | Function | NO | iOS/Android | YES |
+
## 遗留问题