URL Parametreleri
match
parametresi üzerinden URL parametresine ulaşabiliriz.
Hızlıca bir örnek üzerinden test edelim.
İlk olarak gerekli react
ve react-router-dom
componentlerini sayfaya dahil edelim.
import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
Ardından componentimizi oluşturalım. Link
ve Route
componentlerinin kullanımını daha öncede görmüştük.
const ParamsExample = () => (
<Router>
<div>
<h2>Accounts</h2>
<ul>
<li>
<Link to="/netflix">Netflix</Link>
</li>
<li>
<Link to="/zillow-group">Zillow Group</Link>
</li>
<li>
<Link to="/yahoo">Yahoo</Link>
</li>
<li>
<Link to="/modus-create">Modus Create</Link>
</li>
</ul>
<Route path="/:id" component={Child} />
</div>
</Router>
);
Yukarıdaki kodda Link
componentleri URL’i güncellerken, Route
componenti ise linkteki parametreyi path="/:id"
ile bir nevi id
değişkeninde tutmuş oluyor.
Ardından Child
componentimizi oluşturalım. Fonksiyon component olarak tanımladığımız için match
objesini parametre olarak aldık. Class component ile oluşturuyorsak, props üzerinden match objesine şu şekilde ulaşabilirdik:
const match = this.props.match;
Child
componentinde ise match.params.id
ile URL parametresini ekrana yazdırıyoruz.
Böylece (yukarıdaki ParamsExample
componentinde) linklere tıklandıkça URL güncellenecek, ardından bu URL Child
componentine basılacak.
const Child = ({ match }) => (
<div>
<h3>ID: {match.params.id}</h3>
</div>
);
export default ParamsExample;
Kendi dokümanı üzerinden kodu inceleyebilir ve nasıl çalıştığını test edebilirsiniz.