Route

Route componenti, React Routerın belki de iyi kullanmayı öğrenmek adına en önemli componenttir. En temel sorumluluğu, bir konumun link ile eşleştiğinde bazı componentleri arayüzde oluşturmaktır.

Aşağıdaki kodu göz önünde bulundurun:

import { BrowserRouter as Router, Route } from 'react-router-dom'

<Router>
  <div>
    <Route exact path="/" component={Home} />
    <Route path="/news" component={NewsFeed} />
  </div>
</Router>

Uygulamanın konumu / ise, UI hiyerarşisi şöyle bir şey olacaktır:

<div>
  <Home />
  <!-- react-empty: 2 -->
</div>

Uygulamanın konumu /news ise, UI hiyerarşisi şöyle bir şey olacaktır:

<div>
  <NewsFeed />
  <!-- react-empty: 1 -->
</div>

<!-- react-empt --> açıklamaları React’in null render etme işleminin yalnızca uygulama ayrıntılarıdır. Bir Route, görüntüsü boş olsa bile her zaman teknik olarak render edilmiştir. Uygulama konumu route yoluyla eşleştiğinde, componenti oluşturulur.

Route Render Metodları

Bir <Route> render etmek için 3 yol vardır:

Her biri farklı koşullarda faydalıdır. Verilen bir <Route> üzerinde bu metodlardan yalnızca birisini kullanmalısınız. Neden 3 seçeneğiniz olduğunu anlamanız için aşağıda açıklamalarına bakın. Çoğu zaman component kullanacaksınız.

Route Props

Üç render yönteminin hepsi aynı üç Routeta geçecek

Parametreleri

component

Yalnızca link eşleştiğinde render edilecek bir React componenti yazılır.

<Route path="/user/:username" component={User}/>

const User = ({ match }) => {
  return <h1>Merhaba {match.params.username}!</h1>
}

Router, componenti kullandığınızda, verilen componentten yeni bir React elementi oluşturmak için React.createElementi kullanır. Component propsunda bir satır içi fonksiyon olarak yazdıysanız, her render edilişinde yeni bir component oluşturursunuz demektir. Bu, mevcut componentin bağlantısını keser ve yalnızca varolan componenti güncelleştirmek yerine yeni component oluşturur. Satır içi render kullanırken, render veya child propsu kullanın (aşağıda).

render: func

Bu, yukarıda açıklanan istenmeyen yeniden bağlama olmadan uygun satır içi render etmeye verir.

Component propsunu kullanarak sizin için yeni bir React elementi yaratmak yerine konum eşleştiğinde çağrılabilecek bir fonksiyon yazabilirsiniz.

// uygun satır içi render
<Route path="/home" render={() => <div>Home</div>} />

// wrapping/composing
const FadingRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (
    <FadeIn>
      <Component {...props} />
    </FadeIn>
  )}/>
)

<FadingRoute path="/cool" component={Something} />

Uyarı:

<Route component>, <Route render>dan önceliklidir, bu yüzden her ikisini de aynı yolla kullanmayın.

children: func

Bazen yolun konumu ile eşleşip eşleşmediğini belirtmeniz gerekir. Bu gibi durumlarda, children prop fonksiyonunu kullanabilirsiniz. Bir eşleşme olsun veya olmasın denenmesi haricinde çağrılır. Burada, route eşleşiyorsa bir aktif sınıfı ekliyoruz.

<ul>
  <ListItemLink to="/somewhere"/>
  <ListItemLink to="/somewhere-else"/>
</ul>

const ListItemLink = ({ to, ...rest }) => (
  <Route path={to} children={({ match }) => (
    <li className={match ? 'active' : ''}>
      <Link to={to} {...rest}/>
    </li>
  )}/>
)

path: string

path-to-regexpin anladığı herhangi bir geçerli URL yoludur.

Yol olmayan routelar her zaman eşleşir.

<Route path="/users/:id" component={User}/>

exact: bool

Tam olarak eşleşmeyi temsil eder. Route.exact ile eşdeğerdir.

path location.pathname exact eşleşiyor mu?
/one /one/two true hayır
/one /one/two false evet
<Route exact path="/one" component={About} />

strict: bool

Kesinlikle eşleşmeyi temsil eder; Route.strict ile eşdeğerdir.

true olduğunda, eğik çizgi içeren bir yol yalnızca bir location.pathname ile başlayan ve eğik çizgi ile eşleşir. Bu, URL.pathname öğesine ek URL segmentleri olduğunda hiçbir etkisi yoktur.

path location.pathname eşleşiyor mu?
/one/ /one hayır
/one/ /one/ evet
/one/ /one/two evet
<Route strict path="/one/" component={About} />

Uyarı: strict, bir location.pathnamenin sonunda eğik çizgi bulunmadığından emin olmak için kullanılabilir, ancak bunu yapmak için tam doğru olmalıdır.

path location.pathname eşleşiyor mu?
/one/ /one evet
/one/ /one/ hayır
/one/ /one/two hayır
<Route exact strict path="/one" component={About} />

sensitive: bool

true olduğunda, route büyük/küçük harf duyarlı ise eşleşir.

path location.pathname sensitive eşleşiyor mu?
/one /one true evet
/One /one true hayır
/One /one false evet
<Route sensitive path="/one" component={About} />

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