Temiz URL

Dikkat etmişsinizdir, uygulamamızdaki URL’ler # (hash) üzerine inşaa edilmiştir. Varsayılandır ve her zaman çalışır ancak daha temiz url’ler için iyi bir yol vardır.

Modern tarayıcılar JavaScript’in bir http isteği yapmadan URL’i manipüle etmesine izin veriyor. Bu nedenle, yönlendirme yapmak için URL’nin # bölümüne güvenmemiz gerekmiyor.

Tarayıcı Geçmişini Yapılandırma

index.js dosyasını açın ve hashHistory yerine browserHistory alanını import edin.

// index.js
// ...
// `hashHistory` yerine `browserHistory`
import { Router, Route, browserHistory, IndexRoute } from 'react-router'

render((
  <Router history={browserHistory}>
    {/* ... */}
  </Router>
), document.getElementById('app'))

Şimdi uygulamanızı kaydedin ve değişikliği inceleyin, artık temiz url’e sahipsiniz.

Sunucunuzu Yapılandırma

Sunucunuzun URL’i ne olursa olsun uygulamanızın açılması gerekiyor, çünkü uygulamanız tarayıcıda URL’i yönlendiriyor. Mevcut sunucumuz URL’i nasıl işleyeceğini bilmiyor.

Webpack Dev Server, bunu etkinleştirmek için bir seçeneğe sahiptir. package.json dosyasını açın ve --history-api-fallback komutunu ekleyin.

    "start": "webpack-dev-server --inline --content-base . --history-api-fallback"

Ayrıca index.htmldeki yolları değiştirmemiz gerekiyor çünkü URL’ler derin yollarda olacak ve uygulama derin bir yolla başlıyorsa dosyaları bulamayacaktır.

<!-- index.html -->
<!-- index.css -> /index.css -->
<link rel="stylesheet" href="/index.css">

<!-- bundle.js -> /bundle.js -->
<script src="/bundle.js"></script>

Sunucunuz çalışıyorsa durdurun ve sonra tekrar npm start komutu ile çalışın. Sorunsuz çalıştırmayı başardıysanız url’lerinizde # işareti olmadan temiz url’leri görmüş olmanız gerekiyor.

Konu anlatımları sonlanmıştır. Bu aşamadan sonra Gelişmiş Kılavuzlar konularına geçiş yapılacaktır.

Sıradaki Gelişmiş Kılavuz: BrowserRouter