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-dom
dan 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.