Można użyć Route z biblioteki React Router, aby utworzyć trasę z parametrem. Oto przykład:
import { Route, BrowserRouter as Router } from 'react-router-dom';
import UserProfile from './UserProfile';
function App() {
return (
<Router>
<Route path="/user/:id" component={UserProfile} />
</Router>
);
}
W powyższym przykładzie, trasa jest utworzona dla URL-a „/user/:id”. Wartość „:id” jest parametrem i będzie dostępna w komponencie „UserProfile”, który jest wskazany jako komponent do wyrenderowania dla tej trasy. Gdy użytkownik przechodzi do URL-a „/user/42”, komponent „UserProfile” zostanie wyrenderowany i będzie mógł pobrać wartość „42” jako parametr „id”.
Aby pobrać parametry URL. Oto przykład, jak pobrać parametr „id” z URL:
import { useParams } from 'react-router-dom';
function UserProfile() {
let { id } = useParams();
return (
<div>
<h3>ID: {id}</h3>
</div>
);
}
W powyższym przykładzie komponent „UserProfile” jest wyrenderowany dla URL-a, który zawiera parametr „id”, np. „/user/42”. Funkcja useParams jest częścią React Router i pozwala na dostęp do parametrów URL. Wartość id jest używana do wyświetlenia w komponencie.