From 3abed6eb6eb14fe2663e00d4d360551b08944bb7 Mon Sep 17 00:00:00 2001 From: Mark Hermano Date: Tue, 3 Mar 2026 03:01:36 +0800 Subject: [PATCH] fix: broken links for navigate, useParams, useNavigate documentation --- src/content/10/en/part10c.md | 2 +- src/content/10/en/part10d.md | 4 ++-- src/content/10/zh/part10c.md | 4 ++-- src/content/10/zh/part10d.md | 8 ++++---- src/content/7/en/part7a.md | 8 ++++---- src/content/7/es/part7a.md | 8 ++++---- src/content/7/fi/osa7a.md | 8 ++++---- src/content/7/fr/part7a.md | 8 ++++---- src/content/7/zh/part7a.md | 16 ++++++++-------- src/content/9/zh/part9d.md | 4 ++-- 10 files changed, 35 insertions(+), 35 deletions(-) diff --git a/src/content/10/en/part10c.md b/src/content/10/en/part10c.md index a91667a2e87..62d5ba8904f 100644 --- a/src/content/10/en/part10c.md +++ b/src/content/10/en/part10c.md @@ -796,7 +796,7 @@ To learn more about these use cases, read Kent C. Dodds' enlightening article [H #### Exercise 10.15: storing the access token step2 -Improve the useSignIn hook so that it stores the user's access token retrieved from the authenticate mutation. The return value of the hook should not change. The only change you should make to the SignIn component is that you should redirect the user to the reviewed repositories list view after a successful sign in. You can achieve this by using the [useNavigate](https://api.reactrouter.com/v7/functions/react_router.useNavigate.html) hook. +Improve the useSignIn hook so that it stores the user's access token retrieved from the authenticate mutation. The return value of the hook should not change. The only change you should make to the SignIn component is that you should redirect the user to the reviewed repositories list view after a successful sign in. You can achieve this by using the [useNavigate](https://reactrouter.com/api/hooks/useNavigate) hook. After the authenticate mutation has been executed and you have stored the user's access token to the storage, you should reset the Apollo Client's store. This will clear the Apollo Client's cache and re-execute all active queries. You can do this by using the Apollo Client's [resetStore](https://www.apollographql.com/docs/react/api/core/ApolloClient#resetstore) method. You can access the Apollo Client in the useSignIn hook using the [useApolloClient](https://www.apollographql.com/docs/react/api/react/hooks/#useapolloclient) hook. Note that the order of the execution is crucial and should be the following: diff --git a/src/content/10/en/part10d.md b/src/content/10/en/part10d.md index 05555b83731..09846fde62d 100644 --- a/src/content/10/en/part10d.md +++ b/src/content/10/en/part10d.md @@ -447,7 +447,7 @@ As always, test your queries in the Apollo Sandbox first before using them in yo To learn how to open a URL in a browser, read the Expo's [Linking API documentation](https://docs.expo.dev/versions/latest/sdk/linking/). You will need this feature while implementing the button for opening the repository in GitHub. Hint: [Linking.openURL](https://docs.expo.dev/versions/latest/sdk/linking/#linkingopenurlurl) method will come in handy. -The view should have its own route. It would be a good idea to define the repository's id in the route's path as a path parameter, which you can access by using the [useParams](https://reactrouter.com/6.14.2/hooks/use-params) hook. The user should be able to access the view by pressing a repository in the reviewed repositories list. You can achieve this by for example wrapping the RepositoryItem with a [Pressable](https://reactnative.dev/docs/pressable) component in the RepositoryList component and using navigate function to change the route in an onPress event handler. You can access the navigate function with the [useNavigate](https://api.reactrouter.com/v7/functions/react_router.useNavigate.html) hook. +The view should have its own route. It would be a good idea to define the repository's id in the route's path as a path parameter, which you can access by using the [useParams](https://reactrouter.com/6.14.2/hooks/use-params) hook. The user should be able to access the view by pressing a repository in the reviewed repositories list. You can achieve this by for example wrapping the RepositoryItem with a [Pressable](https://reactnative.dev/docs/pressable) component in the RepositoryList component and using navigate function to change the route in an onPress event handler. You can access the navigate function with the [useNavigate](https://reactrouter.com/api/hooks/useNavigate) hook. The final version of the single repository view should look something like this: @@ -537,7 +537,7 @@ Explore Yup's [documentation](https://github.com/jquense/yup#yup) to find suitab You can create a review using the createReview mutation. Check this mutation's arguments in the Apollo Sandbox. You can use the [useMutation](https://www.apollographql.com/docs/react/api/react/hooks/#usemutation) hook to send a mutation to the Apollo Server. -After a successful createReview mutation, redirect the user to the repository's view you implemented in the previous exercise. This can be done with the navigate function after you have obtained it using the [useNavigate](https://reactrouter.com/en/main/hooks/use-navigate) hook. The created review has a repositoryId field which you can use to construct the route's path. +After a successful createReview mutation, redirect the user to the repository's view you implemented in the previous exercise. This can be done with the navigate function after you have obtained it using the [useNavigate](https://reactrouter.com/api/components/Navigate) hook. The created review has a repositoryId field which you can use to construct the route's path. To prevent getting cached data with the repository query in the single repository view, use the *cache-and-network* [fetch policy](https://www.apollographql.com/docs/react/data/queries/#setting-a-fetch-policy) in the query. It can be used with the useQuery hook like this: diff --git a/src/content/10/zh/part10c.md b/src/content/10/zh/part10c.md index beed7b75dc6..a24eb32b199 100644 --- a/src/content/10/zh/part10c.md +++ b/src/content/10/zh/part10c.md @@ -868,8 +868,8 @@ const useSignIn = () => { #### Exercise 10.15: storing the access token step2 - - 改进useSignIn钩子，使其存储从authenticate改变中获取的用户访问令牌。该钩子的返回值不应该改变。你应该对SignIn组件做出的唯一改变是，你应该在成功登录后将用户重定向到已审核的存储库列表视图。你可以通过使用[useNavigate](https://reactrouter.com/en/main/hooks/use-navigate)钩子来实现这一点。 + + 改进useSignIn钩子，使其存储从authenticate改变中获取的用户访问令牌。该钩子的返回值不应该改变。你应该对SignIn组件做出的唯一改变是，你应该在成功登录后将用户重定向到已审核的存储库列表视图。你可以通过使用[useNavigate](https://reactrouter.com/api/components/Navigate)钩子来实现这一点。 在authenticate改变被执行后，你已经将用户的访问令牌存储到存储区，你应该重置Apollo客户端的存储。这将清除Apollo客户端的缓存并重新执行所有活动的查询。你可以通过使用Apollo客户端的[resetStore](https://www.apollographql.com/docs/react/api/core/ApolloClient#resetstore)方法来做到这一点。你可以使用[useApolloClient](https://www.apollographql.com/docs/react/api/react/hooks/#useapolloclient)钩子访问useSignIn钩子中的Apollo客户端。注意，执行的顺序很关键，应该是这样的。 diff --git a/src/content/10/zh/part10d.md b/src/content/10/zh/part10d.md index 9ecb4549b18..d36d11f6a5b 100644 --- a/src/content/10/zh/part10d.md +++ b/src/content/10/zh/part10d.md @@ -479,8 +479,8 @@ describe('SignIn', () => { 要学习如何在浏览器中打开一个URL，请阅读Expo's [Linking API documentation](https://docs.expo.dev/versions/latest/sdk/linking/)。在实现GitHub中打开仓库的按钮时，你会需要这个功能。提示：[Linking.openURL](https://docs.expo.dev/versions/latest/sdk/linking/#linkingopenurlurl)方法会派上用场。 - - 视图应该有自己的路由。最好是在路由的路径中定义仓库的id作为路径参数，你可以通过使用[useParams](https://reactrouter.com/en/main/hooks/use-params)钩子来访问它。用户应该能够通过点击审查过的版本库列表中的版本库来访问该视图。你可以通过例如在RepositoryList组件中用[Pressable](https://reactnative.dev/docs/pressable)组件包装RepositoryItem，并使用navigate函数在onPress事件处理器中改变路线来实现。你可以用[useNavigate](https://reactrouter.com/en/main/hooks/use-navigate)钩子访问navigate函数。 + + 视图应该有自己的路由。最好是在路由的路径中定义仓库的id作为路径参数，你可以通过使用[useParams](https://reactrouter.com/api/hooks/useParams)钩子来访问它。用户应该能够通过点击审查过的版本库列表中的版本库来访问该视图。你可以通过例如在RepositoryList组件中用[Pressable](https://reactnative.dev/docs/pressable)组件包装RepositoryItem，并使用navigate函数在onPress事件处理器中改变路线来实现。你可以用[useNavigate](https://reactrouter.com/api/components/Navigate)钩子访问navigate函数。 单一仓库视图的最终版本应该是这样的。 @@ -578,8 +578,8 @@ export default SingleRepository; 你可以使用createReview改变创建一个评论。在Apollo沙盒中检查这个改变的参数。你可以使用[useMutation](https://www.apollographql.com/docs/react/api/react/hooks/#usemutation)钩子来发送一个改变到Apollo服务器。 - - 在一个成功的createReview改变之后，将用户重定向到你在前面练习中实现的版本库的视图。这可以在你使用[useNavigate](https://reactrouter.com/en/main/hooks/use-navigate)钩子获得navigate函数后完成。创建的审查有一个repositoryId字段，你可以用它来构建路由's路径。 + + 在一个成功的createReview改变之后，将用户重定向到你在前面练习中实现的版本库的视图。这可以在你使用[useNavigate](https://reactrouter.com/api/components/Navigate)钩子获得navigate函数后完成。创建的审查有一个repositoryId字段，你可以用它来构建路由's路径。 为了防止在单一版本库视图中通过repository查询获得缓存数据，在查询中使用_cache-and-network_ [fetch policy](https://www.apollographql.com/docs/react/data/queries/#setting-a-fetch-policy)。它可以像这样与useQuery钩子一起使用。 diff --git a/src/content/7/en/part7a.md b/src/content/7/en/part7a.md index 97d7e70134d..7784587a484 100644 --- a/src/content/7/en/part7a.md +++ b/src/content/7/en/part7a.md @@ -258,7 +258,7 @@ const Note = ({ notes }) => { } ``` -The _Note_ component receives all of the notes as props notes, and it can access the URL parameter (the id of the note to be displayed) with the [useParams](https://reactrouter.com/en/main/hooks/use-params) function of the React Router. +The _Note_ component receives all of the notes as props notes, and it can access the URL parameter (the id of the note to be displayed) with the [useParams](https://reactrouter.com/api/hooks/useParams) function of the React Router. ### useNavigate @@ -322,11 +322,11 @@ const Login = (props) => { } ``` -What is interesting about this component is the use of the [useNavigate](https://reactrouter.com/en/main/hooks/use-navigate) function of the React Router. With this function, the browser's URL can be changed programmatically. +What is interesting about this component is the use of the [useNavigate](https://reactrouter.com/api/components/Navigate) function of the React Router. With this function, the browser's URL can be changed programmatically. With user login, we call _navigate('/')_ which causes the browser's URL to change to _/_ and the application renders the corresponding component Home. -Both [useParams](https://reactrouter.com/en/main/hooks/use-params) and [useNavigate](https://reactrouter.com/en/main/hooks/use-navigate) are hook functions, just like useState and useEffect which we have used many times now. As you remember from part 1, there are some [rules](/en/part1/a_more_complex_state_debugging_react_apps/#rules-of-hooks) to using hook functions. +Both [useParams](https://reactrouter.com/api/hooks/useParams) and [useNavigate](https://reactrouter.com/api/components/Navigate) are hook functions, just like useState and useEffect which we have used many times now. As you remember from part 1, there are some [rules](/en/part1/a_more_complex_state_debugging_react_apps/#rules-of-hooks) to using hook functions. ### Redirect @@ -336,7 +336,7 @@ There is one more interesting detail about the Users route: : } /> ``` -If a user isn't logged in, the Users component is not rendered. Instead, the user is redirected using the component [Navigate](https://reactrouter.com/en/main/components/navigate) to the login view: +If a user isn't logged in, the Users component is not rendered. Instead, the user is redirected using the component [Navigate](https://reactrouter.com/api/components/Navigate) to the login view: ```js diff --git a/src/content/7/es/part7a.md b/src/content/7/es/part7a.md index 3bd82b5ab17..a38f745defb 100644 --- a/src/content/7/es/part7a.md +++ b/src/content/7/es/part7a.md @@ -258,7 +258,7 @@ const Note = ({ notes }) => { } ``` -El componente _Note_ recibe todas las notas como props notes, y se puede acceder al parámetro URL (el id de la nota que se mostrará) con la función [useParams](https://reactrouter.com/en/main/hooks/use-params) de React Router. +El componente _Note_ recibe todas las notas como props notes, y se puede acceder al parámetro URL (el id de la nota que se mostrará) con la función [useParams](https://reactrouter.com/api/hooks/useParams) de React Router. ### useNavigate @@ -322,11 +322,11 @@ const Login = (props) => { } ``` -Lo interesante de este componente es el uso de la función [useNavigate](https://reactrouter.com/en/main/hooks/use-navigate) de react-router. Con esta función, se puede modificar la URL del navegador programáticamente. +Lo interesante de este componente es el uso de la función [useNavigate](https://reactrouter.com/api/components/Navigate) de react-router. Con esta función, se puede modificar la URL del navegador programáticamente. Con el inicio de sesión, llamamos a _navigate('/')_, que cambia la URL del navegador a _/_ y la aplicación muestra el componente correspondiente, Home. -Tanto [useParams](https://reactrouter.com/en/main/hooks/use-params) como [useNavigate](https://reactrouter.com/en/main/hooks/use-navigate) son hooks, al igual que useState y useEffect que ya hemos usado muchas veces. Como recordarás de la parte 1, existen algunas [reglas](/es/part1/un_estado_mas_complejo_depurando_aplicaciones_react#reglas-de-los-hooks) para usar hooks. +Tanto [useParams](https://reactrouter.com/api/hooks/useParams) como [useNavigate](https://reactrouter.com/api/components/Navigate) son hooks, al igual que useState y useEffect que ya hemos usado muchas veces. Como recordarás de la parte 1, existen algunas [reglas](/es/part1/un_estado_mas_complejo_depurando_aplicaciones_react#reglas-de-los-hooks) para usar hooks. ### Redirigir @@ -336,7 +336,7 @@ Hay otro detalle interesante en la ruta de Users: : } /> ``` -Si un usuario no ha iniciado sesión, el componente Users no se renderiza. En su lugar, el usuario es redirigido mediante el componente [Navigate](https://reactrouter.com/en/main/components/navigate) a la vista de inicio de sesión. +Si un usuario no ha iniciado sesión, el componente Users no se renderiza. En su lugar, el usuario es redirigido mediante el componente [Navigate](https://reactrouter.com/api/components/Navigate) a la vista de inicio de sesión. ```js diff --git a/src/content/7/fi/osa7a.md b/src/content/7/fi/osa7a.md index 27241103453..92e0497e38f 100644 --- a/src/content/7/fi/osa7a.md +++ b/src/content/7/fi/osa7a.md @@ -255,7 +255,7 @@ const Note = ({ notes }) => { } ``` -Komponentti _Note_ saa parametrikseen kaikki muistiinpanot propsina notes ja se pääsee URL:n yksilöivään osaan eli näytettävän muistiinpanon id:hen käsiksi React Routerin funktion [useParams](https://reactrouter.com/en/main/hooks/use-params) avulla. +Komponentti _Note_ saa parametrikseen kaikki muistiinpanot propsina notes ja se pääsee URL:n yksilöivään osaan eli näytettävän muistiinpanon id:hen käsiksi React Routerin funktion [useParams](https://reactrouter.com/api/hooks/useParams) avulla. ### useNavigate @@ -319,11 +319,11 @@ const Login = (props) => { } ``` -Mielenkiintoista komponentissa on React Routerin funktion [useNavigate](https://reactrouter.com/en/main/hooks/use-navigate) käyttö. Funktion avulla on mahdollista selaimen osoiterivin muokkaaminen ohjelmallisesti. +Mielenkiintoista komponentissa on React Routerin funktion [useNavigate](https://reactrouter.com/api/components/Navigate) käyttö. Funktion avulla on mahdollista selaimen osoiterivin muokkaaminen ohjelmallisesti. Kirjautumisen yhteydessä suoritettava komento _navigate('/')_ saa aikaan sen, että selaimen osoiteriville tulee osoitteeksi _/_ ja sovellus renderöi osoitetta vastaavan komponentin Home. -Käyttämämme React Router ‑kirjaston funktiot [useParams](https://reactrouter.com/en/main/hooks/use-params) ja [useNavigate](https://reactrouter.com/en/main/hooks/use-navigate) ovat molemmat hook-funktiota samaan tapaan kuin esim. moneen kertaan käyttämämme useState ja useEffect. Kuten muistamme osasta 1, hook-funktioiden käyttöön liittyy tiettyjä [sääntöjä](/osa1/monimutkaisempi_tila_reactin_debuggaus#hookien-saannot). +Käyttämämme React Router ‑kirjaston funktiot [useParams](https://reactrouter.com/api/hooks/useParams) ja [useNavigate](https://reactrouter.com/api/components/Navigate) ovat molemmat hook-funktiota samaan tapaan kuin esim. moneen kertaan käyttämämme useState ja useEffect. Kuten muistamme osasta 1, hook-funktioiden käyttöön liittyy tiettyjä [sääntöjä](/osa1/monimutkaisempi_tila_reactin_debuggaus#hookien-saannot). ### Uudelleenohjaus @@ -333,7 +333,7 @@ Näkymän Users routeen liittyy vielä eräs mielenkiintoinen detalji: : } /> ``` -Jos käyttäjä ei ole kirjautuneena, ei renderöidäkään näkymää Users vaan sen sijaan uudelleenohjataan käyttäjä komponentin [Navigate](https://reactrouter.com/en/main/components/navigate) avulla kirjautumisnäkymään: +Jos käyttäjä ei ole kirjautuneena, ei renderöidäkään näkymää Users vaan sen sijaan uudelleenohjataan käyttäjä komponentin [Navigate](https://reactrouter.com/api/components/Navigate) avulla kirjautumisnäkymään: ```js diff --git a/src/content/7/fr/part7a.md b/src/content/7/fr/part7a.md index fea0976cd5f..a99d0a4b804 100644 --- a/src/content/7/fr/part7a.md +++ b/src/content/7/fr/part7a.md @@ -258,7 +258,7 @@ const Note = ({ notes }) => { } ``` -Le composant _Note_ reçoit toutes les notes en tant que props notes, et il peut accéder au paramètre de l'URL (l'id de la note à afficher) avec la fonction [useParams](https://reactrouter.com/en/main/hooks/use-params) de React Router. +Le composant _Note_ reçoit toutes les notes en tant que props notes, et il peut accéder au paramètre de l'URL (l'id de la note à afficher) avec la fonction [useParams](https://reactrouter.com/api/hooks/useParams) de React Router. ### useNavigate @@ -322,11 +322,11 @@ const Login = (props) => { } ``` -Ce qui est intéressant à propos de ce composant est l'utilisation de la fonction [useNavigate](https://reactrouter.com/en/main/hooks/use-navigate) de React Router. Avec cette fonction, l'URL du navigateur peut être modifiée de manière programmatique. +Ce qui est intéressant à propos de ce composant est l'utilisation de la fonction [useNavigate](https://reactrouter.com/api/components/Navigate) de React Router. Avec cette fonction, l'URL du navigateur peut être modifiée de manière programmatique. Lors de la connexion de l'utilisateur, nous appelons _navigate('/')_ ce qui provoque le changement de l'URL du navigateur en _/_ et l'application rend le composant correspondant Home. -Les fonctions [useParams](https://reactrouter.com/en/main/hooks/use-params) et [useNavigate](https://reactrouter.com/en/main/hooks/use-navigate) sont des fonctions de hook, tout comme useState et useEffect que nous avons maintenant utilisées de nombreuses fois. Comme vous vous en souvenez de la partie 1, il existe certaines [règles](/fr/part1/plongez_dans_le_debogage_dapplications_react#regles-des-hooks) à respecter lors de l'utilisation des fonctions de hook. Create-react-app a été configuré pour vous avertir si vous enfreignez ces règles, par exemple, en appelant une fonction de hook depuis une instruction conditionnelle. +Les fonctions [useParams](https://reactrouter.com/api/hooks/useParams) et [useNavigate](https://reactrouter.com/api/components/Navigate) sont des fonctions de hook, tout comme useState et useEffect que nous avons maintenant utilisées de nombreuses fois. Comme vous vous en souvenez de la partie 1, il existe certaines [règles](/fr/part1/plongez_dans_le_debogage_dapplications_react#regles-des-hooks) à respecter lors de l'utilisation des fonctions de hook. Create-react-app a été configuré pour vous avertir si vous enfreignez ces règles, par exemple, en appelant une fonction de hook depuis une instruction conditionnelle. ### redirect @@ -336,7 +336,7 @@ Il y a un autre détail intéressant concernant la route Users: : } /> ``` -Si un utilisateur n'est pas connecté, le composant Users n'est pas rendu. À la place, l'utilisateur est redirigé en utilisant le composant [Navigate](https://reactrouter.com/en/main/components/navigate) vers la vue de connexion: +Si un utilisateur n'est pas connecté, le composant Users n'est pas rendu. À la place, l'utilisateur est redirigé en utilisant le composant [Navigate](https://reactrouter.com/api/components/Navigate) vers la vue de connexion: ```js diff --git a/src/content/7/zh/part7a.md b/src/content/7/zh/part7a.md index 1f34efdbd72..a2743fa1941 100644 --- a/src/content/7/zh/part7a.md +++ b/src/content/7/zh/part7a.md @@ -290,8 +290,8 @@ const Note = ({ notes }) => { } ``` - - _Note_组件接收所有的笔记作为propnotes，它可以通过React Router的[useParams](https://reactrouter.com/en/main/hooks/use-params)函数访问url参数（要显示的笔记的id）。 + + _Note_组件接收所有的笔记作为propnotes，它可以通过React Router的[useParams](https://reactrouter.com/api/hooks/useParams)函数访问url参数（要显示的笔记的id）。 ### useNavigate @@ -359,14 +359,14 @@ const Login = (props) => { } ``` - - 这个组件的有趣之处在于使用了React Router的[useNavigate](https://reactrouter.com/en/main/hooks/use-navigate)函数。有了这个函数，浏览器的url可以以编程方式改变。 + + 这个组件的有趣之处在于使用了React Router的[useNavigate](https://reactrouter.com/api/components/Navigate)函数。有了这个函数，浏览器的url可以以编程方式改变。 随着用户的登录，我们调用_navigate("/")_，使浏览器的url改变为_/_，应用渲染相应的组件Home。 - - [useParams](https://reactrouter.com/en/main/hooks/use-params)和[useNavigate](https://reactrouter.com/en/main/hooks/use-navigate)都是钩子函数，就像我们现在已经多次使用的useState和useEffect。 正如你在第一章节所记得的，使用钩子函数有一些 [规则](/en/part1/a_more_complex_state_debugging_react_apps/#rules-of-hooks) 。Create-react-app已经被配置为在你违反这些规则时发出警告，例如，从条件语句中调用钩子函数。 + + [useParams](https://reactrouter.com/api/hooks/useParams)和[useNavigate](https://reactrouter.com/api/components/Navigate)都是钩子函数，就像我们现在已经多次使用的useState和useEffect。 正如你在第一章节所记得的，使用钩子函数有一些 [规则](/en/part1/a_more_complex_state_debugging_react_apps/#rules-of-hooks) 。Create-react-app已经被配置为在你违反这些规则时发出警告，例如，从条件语句中调用钩子函数。 ### redirect @@ -377,8 +377,8 @@ const Login = (props) => { : } /> ``` - - 如果一个用户没有登录，Users组件就不会被渲染。相反，用户会被使用组件[Navigate](https://reactrouter.com/en/main/components/navigate)重定向到登录视图。 + + 如果一个用户没有登录，Users组件就不会被渲染。相反，用户会被使用组件[Navigate](https://reactrouter.com/api/components/Navigate)重定向到登录视图。 ```js diff --git a/src/content/9/zh/part9d.md b/src/content/9/zh/part9d.md index e4cf6168e84..9107237c5d4 100644 --- a/src/content/9/zh/part9d.md +++ b/src/content/9/zh/part9d.md @@ -1050,8 +1050,8 @@ export type PublicPatient = Omit // highlight-line 示例使用[Material UI Icons](https://mui.com/components/material-icons/)来表示性别。 - - **注意**，为了访问url中的id，你需要给[useParams](https://reactrouter.com/en/main/hooks/use-params)一个合适的类型参数。 + + **注意**，为了访问url中的id，你需要给[useParams](https://reactrouter.com/api/hooks/useParams)一个合适的类型参数。 ```js const { id } = useParams<{ id: string }>();