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.

 

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.

watch:{
    $route (to, from){
        // burası sizin geliştirme yaptığınız yer.
    }
}

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.

import createHistory from 'history/createBrowserHistory'

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

const history = createHistory()

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

history.listen((location, action) => {
      if (location.hash === "#/") { // amaç da bu olsun mesela
          this.setState({
            id: parseInt(Math.random() * (5 - 1) + 1) // unique id oldugunu düşünelim.
          })
      }
})

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.

import React, { Component } from 'react';
import { HashRouter as Router, Route, Link } from "react-router-dom";

import Users from "./components/Users"
import Index from "./components/Index"
import User from "./components/User"
import createHistory from 'history/createBrowserHistory'

const history = createHistory()

class App extends Component {
  
  constructor() {
    super()

    this.state = {
      id: parseInt(Math.random() * (5 - 0) + 1)
    }

    history.listen((location, action) => {
          if (location.hash === "#/") {
            this.setState({
              id: parseInt(Math.random() * (5 - 1) + 1)
            })
          }
    })
  }
  
  render() {
    return (
      <Router>
        <div>
          <nav>
            <ul>
              <li>
                <Link to="/">Anasayfa</Link>
              </li>
              <li>
                <Link to="/users/">Kullanıcılar</Link>
              </li>
              <li>
                <Link to={'/user/' + this.state.id}>{this.state.id} Nolu Kullanıcıya Git</Link>
              </li>
            </ul>
          </nav>

          <Route path="/" exact component={Index}/>
          <Route path="/users/" component={Users} />
          <Route path="/user/:id" render={(props) => <User id={this.state.id} />} />
        </div>
      </Router>
    );
  }
}

export default App;

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.