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>

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