https://github.com/sedadiriker/useparams-usenavigate-practice

https://github.com/sedadiriker/useparams-usenavigate-practice

react-router react-router-dom useeffect usenavigate usenavigate-hook useparams useparams-hook usestate

Last synced: 3 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/sedadiriker/useparams-usenavigate-practice
• Owner: sedadiriker
• Created: 2024-04-17T08:11:07.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-04-18T12:28:48.000Z (7 months ago)
• Last Synced: 2024-04-18T14:25:38.532Z (7 months ago)
• Topics: react-router, react-router-dom, useeffect, usenavigate, usenavigate-hook, useparams, useparams-hook, usestate
• Language: JavaScript
• Homepage: https://hook-practice.netlify.app/
• Size: 197 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## `useNavigate` Hook Nedir?

`useNavigate` Hooku, React Router kütüphanesindeki bir hookdur ve React Router tarafından sağlanır. Bu hooku kullanarak, React uygulamanız içindeki farklı rotalara yönlendirme işlemlerini gerçekleştirebilirsiniz.

## Kullanım

1. İlk olarak, `useNavigate` hookunu bileşeninize import etmelisiniz:

    ```javascript

    import { useNavigate } from "react-router-dom";

    ```

2. Daha sonra, bileşeninizde `useNavigate` hookun kullanarak bir `navigate` işlevi alırsınız:

    ```javascript

    const navigate = useNavigate();

    ```

3. `navigate` işlevini kullanarak istediğiniz zaman belirli bir rotaya yönlendirme yapabilirsiniz. Örneğin:

    ```javascript

    navigate("/another-page");

    ```

    Yukarıdaki örnekte, `/another-page` rotasına yönlendirme yapılıyor.

Bu şekilde, kullanıcı etkileşimleri veya belirli koşullar gerçekleştiğinde uygulamanızı farklı rotalara yönlendirebilirsiniz.

## `useParams` Hook Nedir?

`useParams` hooku, React Router kütüphanesindeki bir hookdur ve React Router tarafından sağlanır. Bu hooku kullanarak, URL'den parametre değerlerini alabilirsiniz. Özellikle, dinamik rotalarla çalışırken URL'den gelen parametreleri kullanmanız gerektiğinde `useParams` hookunu kullanabilirsiniz.

## Kullanım

1. İlk olarak, `useParams` hookunu bileşeninize import etmelisiniz:

    ```javascript

    import { useParams } from "react-router-dom";

    ```

2. Daha sonra, bileşeninizde `useParams` hookunu kullanarak URL'den parametre değerlerini alabilirsiniz:

    ```javascript

    const params = useParams();

    ```

3. `params` nesnesini kullanarak URL'den gelen parametre değerlerine erişebilirsiniz. Örneğin, bir URL'de `/user/:id` gibi bir parametre tanımlanmışsa:

    ```javascript

    const { id } = params;

    ```

    Yukarıdaki örnekte, URL'den gelen `id` parametre değerini `params` nesnesinden alıyoruz.

Bu şekilde, dinamik rotalarla çalışırken URL'den gelen parametre değerlerini bileşenlerinizde kullanabilirsiniz.

## Error Handling (Hata İşleme)

Bu practice'de, Axios kütüphanesi kullanılarak dış API'ye yapılan isteklerde oluşabilecek hataları ele alır. `useState` hook'u kullanılarak hata durumu (`error`) izlenir. `useEffect` hook'u ve Axios ile yapılan API isteği sırasında oluşan hatalar, `error` durumu true olarak ayarlanır ve kullanıcıya uygun bir hata mesajı gösterilir.