Learn React Hooks

Programmatic navigation

First, we are going to use the useNavigation Hook to implement programmatic navigation. We want to automatically redirect to the corresponding post page after creating a new post.

Let's implement programmatic navigation in the CreatePost component using Hooks:

1. Edit src/post/CreatePost.js, and import the useNavigation Hook there:

import { useNavigation } from 'react-navi'

2. Now, define a Navigation Hook after the existing Resource Hook:

    const navigation = useNavigation()

3. Finally, we adjust the Effect Hook to call navigation.navigate(), once the result of the create post request becomes available:

    useEffect(() => {        if (post && post.data) {            dispatch({ type: 'CREATE_POST', ...post.data })            navigation.navigate(`/view/${post.data.id}`) ...