Router’a parametre göndermek
const Contact = ({ match }) => {
return (<h1>Contact Page: { match.params.id }</h1>)
}...
<Route path="/contact/:id" exact component={Contact} />
...Örnek 27: Route içinde stateless component çağırmak.
Gönderdiğimiz stateless componentin içine bir parametre gönderip console.log a yazdırdığımızda, bizim Route alanında gönderdiğimiz “:id” nin match altında ki param’ın altında olduğunu bulduk. Ardından tek yapmamız gereken stateless componentimizin içerisinde bu “id” yi çağırmak oldu. Sonuç olarak “contact/*”ın altında hangi id’yi çağırsanız, sayfanızda artık o id ile sayfayı yazdırıyor olacaksınız.
Link
Bir router nesnesidir. HTML deki <a href=””> mantığında çalışır. Sayfa içerisinde oluşturduğumuz Routelara link ile yönlendirme yapmak için kullanılır. “to:” parametresinde hangi Route’un path ini yazarsanız o sayfayı render edecektir.
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
<Router>
<div>
<Link to="/">Homepage</Link>
<Link to="/contact">Contact</Link>
... Örnek 28: Link örneği.
NavLink
Link ile aynı görev bilincindedir. Sadece render edilmiş sayfadaki linklere css eklemek isterseniz kullanacağınız bir özelliktir. Sayfa render edildikten sonra linkinize class atamak isterseniz “activeClass”, style atamak isterseniz “activeStyle” yazmanız yeterli olacaktır.
import { BrowserRouter as Router, Route, Link, NavLink } from "react-router-dom";
<Router>
<div>
<NavLink activeClassName="" activeStyle={{}} to="/">Homepage</Link>
<NavLink to="/contact">Contact</NavLink>
... Örnek 29: NavLink örneği.
Redirect
Önceden de denk gelmişsinizdir. Bir web sitesinde ya da uygulamada gezinirken üye girişi yapmışken çıkışa bastığınızda sizi ana sayfaya yönlendirirler. İşte tam olarak redirect’in yaptığı budur. Sizi bir koşul anında başka bir yere yönlendirmesidir.
import { BrowserRouter as Router, Route, Link, NavLink, Redirect } from "react-router-dom";...
<Route path="/profile" exact strict render={
() => (
this.state.loggedIn ? (<Profile/>) : (<Redirect to="/"/>)
)} />
... Örnek 30: Redirect örneği.
Yukarıdaki örnekte şunu demiş olduk; Route’unun path i profil. Yanlız bu sayfaya giderken login olup olmadığını kontrol et. Eğer login olmuşsa Profil sayfasını yükle eğer logout olduysa kullanıcıyı ana sayfaya gönder.
Switch
Bunun normal yazılım dillerindeki switch-case ile hiçbir farkı yoktur, aynı çalışma mantığında çalışır.
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link, NavLink, Redirect, Switch } from "react-router-dom";class App extends Component {
render() {
return (
<div>
<Router>
<div>
<NavLink to="...">...</NavLink>
<NavLink to="...">...</NavLink><Switch>
<Route path="..." exact component={...} />
<Route path="/profile" exact strict render={
() => (
this.state.loggedIn ? (<Profile />) : (<Redirect to="/" />)
)} />
<Route component={Error}></Route>
</Switch> </div>
</Router>
</div>
);
}
}export default App; Örnek 31: Switch örneği.
Yukarıdaki örnekte Routelarımızı Switch özelliğinin içerisine alıyoruz ve en alta default bir Route atıyoruz. Url kısmına Routelarımızda bulunmayan bir şey yazarsak otomatik olarak kullanıcıyı Error sayfasına yönlendiriyoruz.