Reactta Router kullanımı Menu Linklerinin yönetimi yada bir linki istenen bir yere yönlendirme demektir. Yani tıklanan linke ilgili componentin yüklenmesi sağlanır. React Router bu yapıyı bize hazır olarak getirir. Bunun için uygulamamıza npm install react-router-dom komutu ile yükleriz.
Sonra index.js e react-router-dom u import ettim ve <React.StricMode/> sildim ve yerine <BrowserRouter> yazdım.
BrowserRouter : Uygulamanın URL’sini takip eder ve günceller. Mesela, “/about” URL’sine gidildiğinde, React Router bu değişikliği algılar ve ilgili linki yükler.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
import { BrowserRouter } from “react-router-dom”; const root = ReactDOM.createRoot(document.getElementById(‘root’)); root.render( <BrowserRouter> <App /> </BrowserRouter>, document.getElementById(“root”) ); |
Route : Componentin conumunu verir yani sayfaya yönlendirme yaapr. Örneğin, users/2 URL’sine gittiğinde “Users” bileşeni render edilmek istenirse, aşağıdaki gibi bir “Route” işlemi yapılır.
Routes : Router kütüphanesinin bir parçasıdır. Farklı sayfa adreslerini ve bu adreslere karşılık gelen bileşenleri yönetmek için kullanılır. Belirli bir URL ziyaret edildiğinde hangi bileşenin render edileceğini belirlemek için kullanılır.
|
1 2 3 4 5 6 7 8 9 10 |
<Routes> <Route path=“/” element={<Home/>} /> <Route path=“about” element={<About/>} /> <Route path=“users” element={<Users/>} > <Route path=“:id” element={<User/>}/> </Route> <Route path=“*” element={<NotFound />} /> </Routes> |
Link : Tıklandığında sayfalar arası geçiş yapmamzı sağlar.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<Link to=“/” className=“navbar-brand”>React Router</Link> div className=“collapse navbar-collapse” id=“navbarNav”> <ul className=“navbar-nav”> <li className=“nav-item”> <Link to=“/” className={useMatch({path:“” , end:true}) ? “nav-link active” : “nav-link”}>Home</Link> </li> <li className=“nav-item”> <Link to=“/about” className={useMatch({path:“about” , end:true}) ? “nav-link active” : “nav-link”}>About</Link> </li> <li className=“nav-item”> <Link to=“/users” className={useMatch({path:“users” , end:true}) ? “nav-link active” : “nav-link”}>Users</Link> </li> </ul> |
Kodlara bu linkten ulaşabilirisniz.
sağlıcakla kalın….
Bir yanıt yazın