React Router’da History Listen İşlemi

Selamlar. Bir nedenden ötürü React Router’da History Listen İşlemi yapmam gerekiyordu. Buraya kadar sorun yok. Sonuçta en basit olarak her route load olduğunda match edileceği için sorun yaşanmıyor. Bu aşamada withRouter da kulanabilirdim.

React Router'da History Listen İşlemi

 

componentDidMount() Bu İş İçin Var

En kötü componentDidMount dersiniz ve o component yüklendiği anda işleminizi yaparsınız. Ancak benim gibi root elementle işiniz varsa bu biraz sıkıntılı. Bir nedenden dolayı unique id oluşturmam gerekiyordu.

Daha sonra oluşturduğum bu unique id’yi de state’i güncelleyip link ve path’e aktarmalıydım. Bu işler vue tarafında çok daha basit aslında. Aşağıdaki yapı sizin işinizi görür.

createHistory ile Çalışalım

React için router’da yaşanan path change işlemlerine dair spesifik bir event yok gibi görünüyor. Bunun için aşağıdaki gibi bir import işlemi yapalım.

Ardından history adında bir değişkene atayalım.

Ben özellikle constructor içerisinde bu işlemi yaptım ama siz componentDidMount içerisinde de yapabilirdiniz.

Evet olay bu kadar. Direkt size çalıştığım kod parçasını vermeyeceğim onun yerine size aşağıdakini vereceğim. Aynı işi yapacağı ve anlattığım şeyi pekiştireceği için gerçek kod yapısı çok da önemli değil aslında.

React Router’da History Listen İşlemi

Tüm App.js aşağıda yer almaktadır.

Umarım faydası dokunmuştur ya da daha iyi bir çözüm yöntemi biliyorsanız yorumda belirtirseniz yazıyı güncelleyip onu da okuyuculara aktarabilirim.

Okuduğunuz için teşekkür ederim, iyi çalışmalar.