From 07c08a1720baa36d12a21a4d5b1c2b57b07e9b3c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E5=87=AF?= <2376662495@qq.com>
Date: Wed, 3 Jul 2024 15:34:35 +0800
Subject: [PATCH 1/4] =?UTF-8?q?docs:=20[Issues:=20#IAA7P5]=20=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=20react-router-dom=20=E6=8C=87=E5=AF=BC=E6=96=87?=
 =?UTF-8?q?=E6=A1=A3v0.2.2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 zh-cn/react-router-dom.md | 272 ++++++++++++++++++++++++++++++++++++--
 1 file changed, 261 insertions(+), 11 deletions(-)

diff --git a/zh-cn/react-router-dom.md b/zh-cn/react-router-dom.md
index 215ac378..396ae7be 100644
--- a/zh-cn/react-router-dom.md
+++ b/zh-cn/react-router-dom.md
@@ -1,5 +1,5 @@
 <!-- {% raw %} -->
-> 模板版本：v0.1.3
+> 模板版本：v0.2.2
 
 <p align="center">
   <h1 align="center"> <code>react-router-dom</code> </h1>
@@ -38,9 +38,244 @@ 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 { Platform, StyleSheet, Text, TextInput, View, Button, ScrollView } from 'react-native';
+import {
+  Route, Routes, Navigate, Outlet, useLocation,
+  useNavigate,
+  useOutlet,
+  useRoutes,
+  MemoryRouter as Router
+} 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 (
+    <View>
+      <Text>Welcome to the Home page!</Text>
+      <Button title={`To Login by navigate("/login")`} onPress={() => {
+        navigate("/login");
+      }} />
+      <Button title={"To Login by navigate(1)"} onPress={() => {
+        navigate(1);
+      }} />
+
+      <Button title={"To detail by navigate(2)"} onPress={() => {
+        navigate(2);
+      }} />
+
+      <Button title={"To Index3 by navigate(3) initialEntries下标"} onPress={() => {
+        navigate(3);
+      }} />
+
+      <Button title={`To Index3 by navigate("/index3")`} onPress={() => {
+        navigate("/index3");
+      }} />
+      <Button title={"Show messages by Navigate"} onPress={() => {
+        setMessages(true)
+        setTasks(false)
+      }} />
+      <Button title={`Show Tasks by navigate("/messages")`} onPress={() => {
+        setTasks(true)
+        setMessages(false)
+        navigate("/messages", {
+          state: {
+          },
+          replace: false,
+          relative: 'route',
+          preventScrollReset: false,
+        });
+      }} />
+      <Button title={`Show Tasks by navigate("/tasks")`} onPress={() => {
+        setTasks(true)
+        setMessages(false)
+        navigate("/tasks", {
+          state: {
+          },
+          replace: false,
+          relative: 'route',
+          preventScrollReset: true,
+        });
+      }} />
+
+      {messages && (<Navigate to="/messages" replace={false} />)}
+      {tasks && (<Text>下面由Outlet生成</Text>)}
+      {tasks && (<Outlet />)}
+      {messages && (<Text>下面由useOutlet生成</Text>)}
+      {messages && (outlet)}
+    </View>
+  );
+};
+
+const HomeMessages = () => {
+  return (
+    <View style={{ height: 200, backgroundColor: 'yellow' }}>
+      <Text>Outlet Demo: HomeMessages page!</Text>
+    </View>
+  );
+};
+
+const HomeTasks = () => {
+  return (
+    <View style={{ height: 200, backgroundColor: 'red' }}>
+      <Text>Outlet Demo: HomeTasks page!</Text>
+    </View>
+  );
+};
+
+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 (
+    <View>
+      <Text>Welcome to the Login page!</Text>
+      <Text>{location.state?.stateTest} </Text>
+      <TextInput placeholder="Input your username" style={{
+        color: 'black', height: 40, fontSize: 16, backgroundColor: 'white', borderColor: "blue", borderWidth: 1, borderRadius: 20, paddingLeft: 20
+      }}
+        onChangeText={(value) => {
+          setUsername(value);
+          setWarning(value.length == 0)
+        }} />
+      {warning && (<Text style={{ color: 'red' }}>username is empty.</Text>)}
+      <Button title={"Login by <Navigate/>"} onPress={() => {
+        if (username.length == 0) {
+          setWarning(true)
+          return
+        }
+        setLogin(true)
+      }} />
+      {login && (<Navigate to="/detail" state={{ name: username }} replace={false} />)}
+
+      <Button title={`Login by navigate("/detail")`} onPress={() => {
+        if (username.length == 0) {
+          setWarning(true)
+          return
+        }
+        navigate("/detail", {
+          state: {
+            name: username
+          },
+          replace: false,
+          relative: 'route',
+          preventScrollReset: true,
+        });
+
+      }} />
+      <Button title={"Back Home by navigate(-1)"} onPress={() => {
+        navigate(-1);
+      }} />
+    </View>
+  );
+};
+
+
+const LocationTest = () => {
+  const location = useLocation();
+  return (
+    <View>
+      <Text>---- {location.key.length == 0 ? "LocationTest page!" : location.key} ----</Text>
+      <Text>pathname:{location.pathname} search:{location.search} hash:{location.hash} </Text>
+    </View>
+  );
+};
+
+const UseRoutesTestHome = () => {
+  const location = useLocation();
+  return (
+    <View>
+      <Text>---- UseRoutesTestHome home page! ----</Text>
+      <Text>pathname:{location.pathname} search:{location.search} hash:{location.hash} </Text>
+    </View>
+  );
+};
+
+
+const Index3 = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  return (
+    <View>
+      <Text>---- Index3 page! ----</Text>
+      <Text>`---- 如果跳转由navigate("/index3") navigate(-1),回返回上一个页面；如果由navigate(3)，则返回initialEntries 下标为2的页面 ----`</Text>
+      <Button title={"Back Home by navigate(-1)"} onPress={() => {
+        navigate(-1);
+      }} />
+      <Button title={"Back Home by navigate(-2)"} onPress={() => {
+        navigate(-2);
+      }} />
+      <Button title={"Back Home by navigate(-3)"} onPress={() => {
+        navigate(-3);
+      }} />
+    </View>
+  );
+};
+
+
+
+const Detail = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  return (
+    <View>
+      <Text>{location.state?.name}  logged in successfully! Detail page!</Text>
+      <Button title={"Logout"} onPress={() => {
+        navigate(-1)
+      }} />
+      <Button title={"Back Home navigate(-2)"} onPress={() => {
+        navigate(-2);
+      }} />
+    </View>
+  );
+};
+
+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: <UseRoutesTestHome />,
+    },
+    { path: "/locationTest", element: <LocationTest /> },
+  ]);
+  return element;
+}
+
+function UseRoutesTest2() {
+  const location = {
+    pathname: '/locationTest',
+    search: '?id=1&name=test',
+    hash: '#section1',
+    key: "UseRoutesTest2 page",
+  };
+  let element = useRoutes([
+    { path: "/locationTest", element: <LocationTest /> },
+  ], location);
+  return element;
+}
 
 const DomDemo = () => {
   const initialEntries = [
@@ -49,15 +284,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 (
     <ScrollView style={styles.container}>
-      <Router
-        initialEntries={initialEntries}
-        initialIndex={initialIndex}
-        future={{ v7_startTransition: true }}
-      >
+      <Router>
+        <Routes location={location}>
+          <Route path="/locationTest" element={<LocationTest />} />
+        </Routes>
+      </Router>
+
+      <Router>
+        <UseRoutesTest />
+      </Router>
+      <Router>
+        <UseRoutesTest2 />
+      </Router>
+      <Router initialEntries={initialEntries} initialIndex={initialIndex} future={{ v7_startTransition: true }}>
         <Routes>
-          <Route path="/" element={<Home />}>
+          <Route path="/" element={<Home />} >
             <Route path="messages" element={<HomeMessages />} />
             <Route path="tasks" element={<HomeTasks />} />
           </Route>
@@ -69,7 +319,6 @@ const DomDemo = () => {
     </ScrollView>
   );
 };
-
 export default DomDemo;
 ```
 
@@ -80,6 +329,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 Developer Preview2; IDE：DevEco Studio 5.0.3.400SP7; ROM：3.0.0.25;
 
 ## 属性
 
-- 
Gitee


From d704f85a1035682d9db07535f0e8b19ad2063017 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E5=87=AF?= <2376662495@qq.com>
Date: Mon, 8 Jul 2024 09:25:48 +0800
Subject: [PATCH 2/4] =?UTF-8?q?docs:=20[Issues:=20#IAA7P5]=20=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=20react-router-dom=20=E6=8C=87=E5=AF=BC=E6=96=87?=
 =?UTF-8?q?=E6=A1=A3v0.2.2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 zh-cn/react-router-dom.md | 23 +++++++++++++++++------
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/zh-cn/react-router-dom.md b/zh-cn/react-router-dom.md
index 396ae7be..3652d780 100644
--- a/zh-cn/react-router-dom.md
+++ b/zh-cn/react-router-dom.md
@@ -329,7 +329,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 Developer Preview2; IDE：DevEco Studio 5.0.3.400SP7; ROM：3.0.0.25;
+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;
 
 ## 属性
 
@@ -337,16 +337,27 @@ 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               |
+| useHref   | Returns true if this component is a descendant of a < Router >. | Function | NO       | iOS/Android      | YES               |
+| useInRouterContext   | Returns the current location object, which represents the current URL in web browsers. | Function | NO       | iOS/Android      | YES               |
+| useLoaderData   | Returns the loaderData for the given routeId. | Function | NO       | iOS/Android      | YES               |
+| useMatch   | The interface for the navigate() function returned from useNavigate(). | Function | NO       | iOS/Android      | YES               |
+| useRouteError   | Returns the happy-path data from the nearest ancestor < Await /> value. | Function | NO       | iOS/Android      | YES               |
+| useRouteId   | Returns the current navigation, defaulting to an "idle" navigation when no navigation is in progress. | Function | NO       | iOS/Android      | YES               |
+| useRouteLoaderData   | Returns the action data for the nearest ancestor Route action. | Function | NO       | iOS/Android      | YES               |
+
 
 ## 遗留问题
 
-- 
Gitee


From 05220e4c4e104140fd70f4fcd14f48d86d4a278f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E5=87=AF?= <2376662495@qq.com>
Date: Mon, 8 Jul 2024 11:02:01 +0800
Subject: [PATCH 3/4] =?UTF-8?q?docs:=20[Issues:=20#IAA7P5]=20=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=20react-router-dom=20=E6=8C=87=E5=AF=BC=E6=96=87?=
 =?UTF-8?q?=E6=A1=A3v0.2.2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 zh-cn/react-router-dom.md | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/zh-cn/react-router-dom.md b/zh-cn/react-router-dom.md
index 3652d780..59846090 100644
--- a/zh-cn/react-router-dom.md
+++ b/zh-cn/react-router-dom.md
@@ -350,13 +350,6 @@ export default DomDemo;
 | 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               |
-| useHref   | Returns true if this component is a descendant of a < Router >. | Function | NO       | iOS/Android      | YES               |
-| useInRouterContext   | Returns the current location object, which represents the current URL in web browsers. | Function | NO       | iOS/Android      | YES               |
-| useLoaderData   | Returns the loaderData for the given routeId. | Function | NO       | iOS/Android      | YES               |
-| useMatch   | The interface for the navigate() function returned from useNavigate(). | Function | NO       | iOS/Android      | YES               |
-| useRouteError   | Returns the happy-path data from the nearest ancestor < Await /> value. | Function | NO       | iOS/Android      | YES               |
-| useRouteId   | Returns the current navigation, defaulting to an "idle" navigation when no navigation is in progress. | Function | NO       | iOS/Android      | YES               |
-| useRouteLoaderData   | Returns the action data for the nearest ancestor Route action. | Function | NO       | iOS/Android      | YES               |
 
 
 ## 遗留问题
-- 
Gitee


From 0fe1d4b467436a99075f077e63806eb95d6286fa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E5=87=AF?= <2376662495@qq.com>
Date: Mon, 8 Jul 2024 11:37:43 +0800
Subject: [PATCH 4/4] =?UTF-8?q?docs:=20[Issues:=20#IAA7P5]=20=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=20react-router-dom=20=E6=8C=87=E5=AF=BC=E6=96=87?=
 =?UTF-8?q?=E6=A1=A3v0.2.2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 zh-cn/react-router-dom.md | 72 ++++++++++++++++++++++++++++++++++++++-
 1 file changed, 71 insertions(+), 1 deletion(-)

diff --git a/zh-cn/react-router-dom.md b/zh-cn/react-router-dom.md
index 59846090..2f8beaa6 100644
--- a/zh-cn/react-router-dom.md
+++ b/zh-cn/react-router-dom.md
@@ -39,13 +39,17 @@ yarn add react-router-dom@6.22.1
 
 ```tsx
 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
+  MemoryRouter as Router,
+  Await,
+  useAsyncError,
+  useAsyncValue
 } from 'react-router-dom';
 
 const Home = () => {
@@ -236,6 +240,9 @@ const Detail = () => {
   );
 };
 
+
+
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,
@@ -277,6 +284,63 @@ function UseRoutesTest2() {
   return element;
 }
 
+function ErrorElement() {
+  const error:any = useAsyncError();
+  return (
+      <Text>页面出错了：{error.message}</Text>
+  );
+}
+
+const DomUseAsyncError = () => {
+  const asyncLoadData =()=>{
+      return new Promise((resolve, reject) => {
+          setTimeout(() => {
+              resolve({message:'异步请求失败'})
+          }, 2000)
+      });
+  }
+
+  return (<View style={
+      {backgroundColor:"red"}
+  }>
+      <Text>home页</Text>
+      <Suspense fallback={<Text>加载中.....</Text>}>
+          <Await resolve={asyncLoadData()} errorElement={<ErrorElement />}>
+              <Text>加载成功</Text>
+          </Await>
+      </Suspense>
+  </View>);
+};
+
+function SuccessElement(){
+  const result:any = useAsyncValue();
+  return (
+      <Text>页面请求成功：{result.message}</Text>
+  );
+}
+
+const DomUseAsyncValue = () => {
+  const asyncLoadData =()=>{
+      return new Promise((resolve, reject) => {
+          // 异步操作，比如请求数据
+          setTimeout(() => {
+              resolve({message:'请求成功'})
+          }, 2000)
+      });
+  }
+
+  return (<View style={
+      {backgroundColor:"yellow"}
+  }>
+      <Text>home页</Text>
+      <Suspense fallback={<Text>加载中.....</Text>}>
+          <Await resolve={asyncLoadData()} errorElement={<ErrorElement/>}>
+              <SuccessElement/>
+          </Await>
+      </Suspense>
+  </View>);
+};
+
 const DomDemo = () => {
   const initialEntries = [
     "/",
@@ -316,6 +380,12 @@ const DomDemo = () => {
           <Route path="/index3" element={<Index3 />} />
         </Routes>
       </Router>
+      <Router>
+        <DomUseAsyncError />
+      </Router>
+      <Router>s
+        <DomUseAsyncValue />
+      </Router>
     </ScrollView>
   );
 };
-- 
Gitee