Browser Router

UI’ızı URL ile senkronize tutmak için HTML5 history API’sini (pushState, replaceState ve popstate eventi) kullanan bir <Router>dır.

BrowserRouter kullanmak için react-router-domdan import edip basitçe aşağıdaki gibi kullanabiliriz.

import { BrowserRouter } from 'react-router-dom'

<BrowserRouter
  basename={}
  forceRefresh={}
  getUserConfirmation={}
  keyLength={}
>
  <App/>
</BrowserRouter>

Parametreleri

basename: string

Tüm konumların temel URL’ini belirtir. Uygulamanız sunucunuzdaki bir alt dizinde sunuluyorsa, bunu alt dizine ayarlayabilirsiniz. Başlarında / olmalı fakat sonlarında olmamalıdır.

<BrowserRouter basename="/calendar"/>
<Link to="/today"/> // <a href="/calendar/today"> şeklinde render edilecektir.

HTML’deki <base href="" /> tag’ı ile aynı mantıkta çalışır.

getUserConfirmation: func

Gezinmeyi onaylamak için kullanılacak bir fonksiyondur. Varsayılan window.confirm komutunu kullanır.

// bu varsayılan davranıştır
const getConfirmation = (message, callback) => {
  const allowTransition = window.confirm(message)
  callback(allowTransition)
}

<BrowserRouter getUserConfirmation={getConfirmation}/>

forceRefresh: bool

forceRefresh parametresi true ise, router sayfa gezinirken sayfayı komple yenileyecektir. Büyük olasılıkla bunu yalnızca HTML5 history API’sini desteklemeyen tarayıcılarda kullanırsınız.

const supportsHistory = 'pushState' in window.history
<BrowserRouter forceRefresh={!supportsHistory}/>

keyLength: number

location.key uzunluğudur, varsayılan olarak 6’dır.

<BrowserRouter keyLength={12}/>

children: node

Bir adet child element render eder.

Sıradaki Gelişmiş Kılavuz: Hash Router