Pobieranie parametru z URL za pomocą biblioteki React Router?

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.

Kategorie