Route Render Etmek

<Router> bir React Router componentidir.

render(<Router/>, document.getElementById('app'))

Bu kod, bir Route yapılandırana kadar hiçbir şey göstermeyecektir.

index.js dosyasını açın ve

  1. Router, Route ve hashHistoryi import et
  2. App componentini render et
// ...
import { Router, Route, hashHistory } from 'react-router'

render((
  <Router history={hashHistory}>
    <Route path="/" component={App}/>
  </Router>
), document.getElementById('app'))

npm start komutu ile çalıştığından emin olun ve daha sonra http://localhost:8080 linkini ziyaret edin.

Aynı ekranı daha önce olduğu gibi (yani router kullanmadan önce sadece App componentini render ettiğimiz halini) almanız gerekir ancak URL’de fazladan gereksiz bir hash (#) karakteri var. Bunun sebebi HashHistory kullanıyor olmamız (url’in # kısmı ile yönlendirme geçmişi yönetiliyor). Bunu daha sonra değiştireceğiz ancak şu an için işe yarıyor.

Daha Fazla Ekran Ekleme

İki yeni component oluşturun:

// modules/About.js dosyası
import React from 'react'

export default React.createClass({
  render() {
    return <div>Hakkında</div>
  }
})

// modules/Repos.js dosyası
import React from 'react'

export default React.createClass({
  render() {
    return <div>Repos</div>
  }
})

Şimdi bunları kendi yollarındaki uygulama ile birleştirelim.

// insert into index.js dosyası
import About from './modules/About'
import Repos from './modules/Repos'

render((
  <Router history={hashHistory}>
    <Route path="/" component={App}/>
    {/* routeları buraya ekle */}
    <Route path="/repos" component={Repos}/>
    <Route path="/about" component={About}/>
  </Router>
), document.getElementById('app'))

http://localhost:8080/#/about ve http://localhost:8080/#/repos linklerini kontrol edin.

Sıradaki Eğitim: Link ile Gezinmek