React Router URL 매개변수와 관련된 주요 문제는 동적 경로에서 사용하기 어려울 수 있다는 것입니다. 이는 URL 매개변수가 정적이며 경로가 생성된 후에는 변경할 수 없기 때문입니다. 즉, 사용자가 매개변수가 다른 다른 페이지에 액세스해야 하는 경우 각 매개변수 조합에 대해 새 경로를 만들어야 합니다. 또한 URL 매개변수를 사용할 때 가능한 모든 조합을 추적하고 각 조합이 라우터에서 적절하게 처리되는지 확인하는 것이 어려울 수 있습니다.
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.
);
};
이 코드는 URL의 사용자 이름으로 페이지를 렌더링하도록 React Router를 설정합니다.
1. 첫 번째 줄은 React Router DOM 라이브러리에서 구성 요소를 가져옵니다.
2. App 함수는 "/user/"로 시작하는 모든 URL이 UserPage 구성 요소를 렌더링하도록 지정하는 Route 구성 요소가 내부에 있는 Router 구성 요소를 반환합니다.
3. UserPage 함수는 useParams()를 사용하여 URL에서 사용자 이름을 가져온 다음 해당 사용자 이름을 사용하여 인사말을 렌더링합니다.
URL 매개변수
React Router의 URL 매개변수는 URL의 일부로 경로에 전달되는 데이터 조각입니다. 이를 통해 개발자는 ID 또는 쿼리 문자열과 같은 동적 정보를 경로에 전달할 수 있습니다. 이는 데이터베이스의 특정 항목을 표시하거나 사용자 입력을 기반으로 콘텐츠를 필터링하는 것과 같은 작업에 사용할 수 있는 동적 경로를 만드는 데 사용할 수 있습니다. React Router는 URL 매개변수에 액세스하고 조작하기 위한 도구를 제공하므로 애플리케이션에서 쉽게 사용할 수 있습니다.
React의 경로에서 URL 매개 변수를 어떻게 얻습니까?
React Router에서는 useParams 후크를 사용하여 경로에서 URL 매개변수에 액세스할 수 있습니다. 이 후크는 URL 매개변수의 키-값 쌍을 포함하는 객체를 반환합니다. 예를 들어 경로가 /user/:id인 경우 useParams().id를 사용하여 id 매개변수에 액세스할 수 있습니다.
