Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/content/10/en/part10c.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 <em>useSignIn</em> hook so that it stores the user's access token retrieved from the <i>authenticate</i> mutation. The return value of the hook should not change. The only change you should make to the <em>SignIn</em> 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 <em>useSignIn</em> hook so that it stores the user's access token retrieved from the <i>authenticate</i> mutation. The return value of the hook should not change. The only change you should make to the <em>SignIn</em> 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 <i>authenticate</i> 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 <em>useSignIn</em> 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:

Expand Down
4 changes: 2 additions & 2 deletions src/content/10/en/part10d.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 <em>RepositoryItem</em> with a [Pressable](https://reactnative.dev/docs/pressable) component in the <em>RepositoryList</em> component and using <em>navigate</em> function to change the route in an <em>onPress</em> event handler. You can access the <em>navigate</em> 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 <em>RepositoryItem</em> with a [Pressable](https://reactnative.dev/docs/pressable) component in the <em>RepositoryList</em> component and using <em>navigate</em> function to change the route in an <em>onPress</em> event handler. You can access the <em>navigate</em> function with the [useNavigate](https://reactrouter.com/api/hooks/useNavigate) hook.

The final version of the single repository view should look something like this:

Expand Down Expand Up @@ -537,7 +537,7 @@ Explore Yup's [documentation](https://github.com/jquense/yup#yup) to find suitab

You can create a review using the <em>createReview</em> 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 <em>createReview</em> mutation, redirect the user to the repository's view you implemented in the previous exercise. This can be done with the <em>navigate</em> function after you have obtained it using the [useNavigate](https://reactrouter.com/en/main/hooks/use-navigate) hook. The created review has a <em>repositoryId</em> field which you can use to construct the route's path.
After a successful <em>createReview</em> mutation, redirect the user to the repository's view you implemented in the previous exercise. This can be done with the <em>navigate</em> function after you have obtained it using the [useNavigate](https://reactrouter.com/api/components/Navigate) hook. The created review has a <em>repositoryId</em> field which you can use to construct the route's path.

To prevent getting cached data with the <em>repository</em> 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 <em>useQuery</em> hook like this:

Expand Down
4 changes: 2 additions & 2 deletions src/content/10/zh/part10c.md
Original file line number Diff line number Diff line change
Expand Up @@ -868,8 +868,8 @@ const useSignIn = () => {

#### Exercise 10.15: storing the access token step2

<!-- Improve the <em>useSignIn</em> hook so that it stores the user's access token retrieved from the <i>authenticate</i> mutation. The return value of the hook should not change. The only change you should make to the <em>SignIn</em> 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/en/main/hooks/use-navigate) hook.-->
改进<em>useSignIn</em>钩子,使其存储从<i>authenticate</i>改变中获取的用户访问令牌。该钩子的返回值不应该改变。你应该对<em>SignIn</em>组件做出的唯一改变是,你应该在成功登录后将用户重定向到已审核的存储库列表视图。你可以通过使用[useNavigate](https://reactrouter.com/en/main/hooks/use-navigate)钩子来实现这一点。
<!-- Improve the <em>useSignIn</em> hook so that it stores the user's access token retrieved from the <i>authenticate</i> mutation. The return value of the hook should not change. The only change you should make to the <em>SignIn</em> 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/components/Navigate) hook.-->
改进<em>useSignIn</em>钩子,使其存储从<i>authenticate</i>改变中获取的用户访问令牌。该钩子的返回值不应该改变。你应该对<em>SignIn</em>组件做出的唯一改变是,你应该在成功登录后将用户重定向到已审核的存储库列表视图。你可以通过使用[useNavigate](https://reactrouter.com/api/components/Navigate)钩子来实现这一点。

<!-- After the <i>authenticate</i> 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 <em>useSignIn</em> 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:-->
在<i>authenticate</i>改变被执行后,你已经将用户的访问令牌存储到存储区,你应该重置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)钩子访问<em>useSignIn</em>钩子中的Apollo客户端。注意,执行的顺序很关键,应该是这样的。
Expand Down
8 changes: 4 additions & 4 deletions src/content/10/zh/part10d.md
Original file line number Diff line number Diff line change
Expand Up @@ -479,8 +479,8 @@ describe('SignIn', () => {
<!-- 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.-->
要学习如何在浏览器中打开一个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)方法会派上用场。

<!-- 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/en/main/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 <em>RepositoryItem</em> with a [Pressable](https://reactnative.dev/docs/pressable) component in the <em>RepositoryList</em> component and using <em>navigate</em> function to change the route in an <em>onPress</em> event handler. You can access the <em>navigate</em> function with the [useNavigate](https://reactrouter.com/en/main/hooks/use-navigate) hook.-->
视图应该有自己的路由。最好是在路由的路径中定义仓库的id作为路径参数,你可以通过使用[useParams](https://reactrouter.com/en/main/hooks/use-params)钩子来访问它。用户应该能够通过点击审查过的版本库列表中的版本库来访问该视图。你可以通过例如在<em>RepositoryList</em>组件中用[Pressable](https://reactnative.dev/docs/pressable)组件包装<em>RepositoryItem</em>,并使用<em>navigate</em>函数在<em>onPress</em>事件处理器中改变路线来实现。你可以用[useNavigate](https://reactrouter.com/en/main/hooks/use-navigate)钩子访问<em>navigate</em>函数。
<!-- 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/api/hooks/useParams) 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 <em>RepositoryItem</em> with a [Pressable](https://reactnative.dev/docs/pressable) component in the <em>RepositoryList</em> component and using <em>navigate</em> function to change the route in an <em>onPress</em> event handler. You can access the <em>navigate</em> function with the [useNavigate](https://reactrouter.com/api/components/Navigate) hook.-->
视图应该有自己的路由。最好是在路由的路径中定义仓库的id作为路径参数,你可以通过使用[useParams](https://reactrouter.com/api/hooks/useParams)钩子来访问它。用户应该能够通过点击审查过的版本库列表中的版本库来访问该视图。你可以通过例如在<em>RepositoryList</em>组件中用[Pressable](https://reactnative.dev/docs/pressable)组件包装<em>RepositoryItem</em>,并使用<em>navigate</em>函数在<em>onPress</em>事件处理器中改变路线来实现。你可以用[useNavigate](https://reactrouter.com/api/components/Navigate)钩子访问<em>navigate</em>函数。

<!-- The final version of the single repository view should look something like this:-->
单一仓库视图的最终版本应该是这样的。
Expand Down Expand Up @@ -578,8 +578,8 @@ export default SingleRepository;
<!-- You can create a review using the <em>createReview</em> 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.-->
你可以使用<em>createReview</em>改变创建一个评论。在Apollo沙盒中检查这个改变的参数。你可以使用[useMutation](https://www.apollographql.com/docs/react/api/react/hooks/#usemutation)钩子来发送一个改变到Apollo服务器。

<!-- After a successful <em>createReview</em> mutation, redirect the user to the repository's view you implemented in the previous exercise. This can be done with the <em>navigate</em> function after you have obtained it using the [useNavigate](https://reactrouter.com/en/main/hooks/use-navigate) hook. The created review has a <em>repositoryId</em> field which you can use to construct the route's path.-->
在一个成功的<em>createReview</em>改变之后,将用户重定向到你在前面练习中实现的版本库的视图。这可以在你使用[useNavigate](https://reactrouter.com/en/main/hooks/use-navigate)钩子获得<em>navigate</em>函数后完成。创建的审查有一个<em>repositoryId</em>字段,你可以用它来构建路由's路径。
<!-- After a successful <em>createReview</em> mutation, redirect the user to the repository's view you implemented in the previous exercise. This can be done with the <em>navigate</em> function after you have obtained it using the [useNavigate](https://reactrouter.com/api/components/Navigate) hook. The created review has a <em>repositoryId</em> field which you can use to construct the route's path.-->
在一个成功的<em>createReview</em>改变之后,将用户重定向到你在前面练习中实现的版本库的视图。这可以在你使用[useNavigate](https://reactrouter.com/api/components/Navigate)钩子获得<em>navigate</em>函数后完成。创建的审查有一个<em>repositoryId</em>字段,你可以用它来构建路由's路径。

<!-- To prevent getting cached data with the <em>repository</em> 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 <em>useQuery</em> hook like this:-->
为了防止在单一版本库视图中通过<em>repository</em>查询获得缓存数据,在查询中使用_cache-and-network_ [fetch policy](https://www.apollographql.com/docs/react/data/queries/#setting-a-fetch-policy)。它可以像这样与<em>useQuery</em>钩子一起使用。
Expand Down
8 changes: 4 additions & 4 deletions src/content/7/en/part7a.md
Original file line number Diff line number Diff line change
Expand Up @@ -258,7 +258,7 @@ const Note = ({ notes }) => {
}
```

The _Note_ component receives all of the notes as props <i>notes</i>, 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 <i>notes</i>, 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

Expand Down Expand Up @@ -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 <i>Home</i>.

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

Expand All @@ -336,7 +336,7 @@ There is one more interesting detail about the <i>Users</i> route:
<Route path="/users" element={user ? <Users /> : <Navigate replace to="/login" />} />
```

If a user isn't logged in, the <i>Users</i> component is not rendered. Instead, the user is <i>redirected</i> using the component [Navigate](https://reactrouter.com/en/main/components/navigate) to the login view:
If a user isn't logged in, the <i>Users</i> component is not rendered. Instead, the user is <i>redirected</i> using the component [Navigate](https://reactrouter.com/api/components/Navigate) to the login view:

```js
<Navigate replace to="/login" />
Expand Down
8 changes: 4 additions & 4 deletions src/content/7/es/part7a.md
Original file line number Diff line number Diff line change
Expand Up @@ -258,7 +258,7 @@ const Note = ({ notes }) => {
}
```

El componente _Note_ recibe todas las notas como props <i>notes</i>, 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 <i>notes</i>, 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

Expand Down Expand Up @@ -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, <i>Home</i>.

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

Expand All @@ -336,7 +336,7 @@ Hay otro detalle interesante en la ruta de <i>Users</i>:
<Route path="/users" element={user ? <Users /> : <Navigate replace to="/login" />} />
```

Si un usuario no ha iniciado sesión, el componente <i>Users</i> no se renderiza. En su lugar, el usuario es <i>redirigido</i> 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 <i>Users</i> no se renderiza. En su lugar, el usuario es <i>redirigido</i> mediante el componente [Navigate](https://reactrouter.com/api/components/Navigate) a la vista de inicio de sesión.

```js
<Navigate replace to="/login" />
Expand Down
Loading