Static Router
Konumu hiçbir zaman değiştirmeyen bir <Router>
dır. Bu, kullanıcı aslında etrafta tıklama yapmadığı sürece sunucu tarafı oluşturma senaryolarında yararlı olabilir, böylece konum aslında hiç değişmez. Aynı zamanda basit bir testte, yalnızca bir konumu takmanız ve render çıktısı üzerinde onaylamalar yapmanız gerektiğinde faydalıdır. Ayrıca, <Redirect>
ler için 302 durum kodu ve diğer istekler için normal HTML gönderen bir örnek düğüm sunucusudur.
import { createServer } from 'http'
import React from 'react'
import ReactDOMServer from 'react-dom/server'
import { StaticRouter } from 'react-router'
createServer((req, res) => {
// Bu obje, render işleminin sonuçlarını içerir
const context = {}
const html = ReactDOMServer.renderToString(
<StaticRouter location={req.url} context={context}>
<App/>
</StaticRouter>
)
// context.url, bir <Redirect> kullanıldığında yönlendirilecek URL'yi içerecektir
if (context.url) {
res.writeHead(302, {
Location: context.url
})
res.end()
} else {
res.write(html)
res.end()
}
}).listen(3000)
Parametreleri
basename: string
Tüm konumlar için temel URL’dir. Düzgün olarak biçimlendirilmiş bir basename, bir eğik çizgi içermeli, ancak takip eden bir eğik çizgi olmamalıdır.
<StaticRouter basename="/calendar">
<Link to="/today"/> // <a href="/calendar/today"> şeklinde render edilecektir
</StaticRouter>
location: string
Sunucudan alınan URL, büyük olasılıkla bir düğüm sunucusunda req.url.
<StaticRouter location={req.url}>
<App/>
</StaticRouter>
location: object
{ pathname, search, hash, state }
gibi bir konum objesi içerir.
<StaticRouter location={req.url}>
<App/>
</StaticRouter>
context: object
Düz bir JavaScript objesidir. Render sırasında, componentleri render etmek hakkında bilgi depolamak için objeye özellik ekleyebilir.
<StaticRouter location={-{ pathname: '/bubblegum' }-}>
<App/>
</StaticRouter>
GitHub Pages süslü parantezden ({
) iki tane yan yana koyulduğunda hata verdiği için araya tire (-
) koydum, normalde kodda o tireleri yok sayın.
Bir <Route>
eşleştiğinde, context objesini staticContext
prop olarak oluşturduğu componente iletir. Render edildikten sonra, bu özellikler sunucunun yanıtını yapılandırmak için kullanılabilir.
if(context.status === '404') {
// ...
}
children: node
Bir adet child element render eder.
<StaticRouter>
<App/>
</StaticRouter>