React Router URL parametreleriyle ilgili temel sorun, dinamik rotalarda kullanımlarının zor olabilmesidir. Bunun nedeni, URL parametrelerinin statik olması ve rota oluşturulduktan sonra değiştirilememesidir. Bu, bir kullanıcının farklı parametrelerle farklı bir sayfaya erişmesi gerekiyorsa, her parametre kombinasyonu için yeni bir yol oluşturması gerekeceği anlamına gelir. Ek olarak, URL parametrelerini kullanırken olası tüm kombinasyonları takip etmek ve her birinin yönlendirici tarafından düzgün bir şekilde işlendiğinden emin olmak zor olabilir.
import {
BrowserRouter as Router,
Route,
Link,
useParams
} from "react-router-dom";
const App = () => {
return (
<Router>
<div>
<Route path="/user/:username" component={UserPage} />
</div>
</Router>
);
};
const UserPage = () => {
let { username } = useParams(); // Get the username from the URL.
return (
<div>Hello, {username}!</div> // Render a greeting with the username.
);
};
Bu kod, URL'den bir kullanıcı adına sahip bir sayfa oluşturmak için bir React Router kuruyor.
1. İlk satır, bileşenleri React Router DOM kitaplığından içe aktarır.
2. Uygulama işlevi, Yönlendirici bileşenini, içinde “/user/” ile başlayan herhangi bir URL'nin UserPage bileşenini oluşturması gerektiğini belirten bir Route bileşeniyle birlikte döndürür.
3. UserPage işlevi, kullanıcı adını URL'den almak için useParams()'ı kullanır ve ardından bu kullanıcı adını kullanarak bir selamlama oluşturur.
URL parametreleri
React Router'daki URL parametreleri, URL'nin bir parçası olarak bir rotaya iletilen veri parçalarıdır. Geliştiricilerin, kimlik veya sorgu dizesi gibi dinamik bilgileri bir yola iletmelerine olanak tanırlar. Bu, bir veritabanından belirli öğeleri görüntülemek veya kullanıcı girişine göre içeriği filtrelemek gibi şeyler için kullanılabilecek dinamik rotalar oluşturmak için kullanılabilir. React Router, URL parametrelerine erişmek ve bunları değiştirmek için araçlar sağlayarak bunları uygulamanızda kullanmayı kolaylaştırır.
URL parametrelerini React'teki bir rotadan nasıl alırsınız?
React Router'da, useParams kancasını kullanarak bir rotadan URL parametrelerine erişebilirsiniz. Bu kanca, URL parametrelerinin anahtar-değer çiftlerini içeren bir nesne döndürür. Örneğin, rotanız /user/:id ise, id parametresine useParams().id ile erişebilirsiniz.
