Programmatically navigating using the Navigation Hook

Whenever we want to programmatically navigate instead of having a link for the user to click, we can use the Navigation Hook provided by React Router. The Navigation Hook provides a function to navigate programmatically.

Let’s get started using the Navigation Hook now:

1. Edit src/components/post/CreatePost.jsx and import the useNavigate function:

   import { useNavigate } from 'react-router'
   

2. Define a Navigate Hook inside the CreatePost component:

   export function CreatePost() {
     const [username] = useContext(UserContext)
     const navigate = useNavigate()
   

3. Inside the Action State Hook, get the result from the mutation and then redirect to the ViewPost page of the newly created post:

     const [error, submitAction, isPending] = useActionState(
       async (currentState, formData) => {
         const title = formData.get('title')
         const content...