React에서 현재 URL 가져오기

1. React에서 현재 URL 가져오기 - 바닐라 자바스크립트 솔루션
2. React Router를 통해 현재 URL 가져오기
3. 현재 URL React 라우터 후크 가져오기

React에서 단일 페이지 애플리케이션을 개발할 때 라우팅은 퍼즐의 핵심 조각입니다. 모든 URL에는 표시해야 하는 구성 요소 또는 기타 시각적 개체가 있을 수 있습니다.

React 앱을 빌드할 때 개발자는 종종 현재 URL을 기반으로 다양한 작업을 수행해야 합니다. 개발자는 다양한 인터페이스를 사용하여 현재 URL에 액세스할 수 있습니다.

React에서 현재 URL 가져오기 - 바닐라 자바스크립트 솔루션

React는 일반 JavaScript를 기반으로 하기 때문에 window 인터페이스에서 location 속성에 액세스할 수 있습니다. 현재 URL의 전체 경로를 얻으려면 window.location.href를 사용하고 루트 도메인이 없는 경로를 얻으려면 대신 window.location.pathname에 액세스하십시오.

예를 살펴보겠습니다.

class App extends Component {
  render() {
    console.log(window.location.href);
    return <h1>Hi! Try edit me</h1>;
  }
}

playcode.io에서 App 구성 요소를 렌더링하면 콘솔에 프로젝트의 전체 URL이 표시됩니다. 이 경우 https://playcode.io/837468/이 됩니다. 대신 console.log(window.location.pathname)를 입력하면 콘솔 출력은 /837468/이 됩니다. 이 링크를 따라 코드를 직접 사용해보세요.

window.location을 읽는 것은 현재 URL을 가져오는 훌륭하고 간단한 솔루션입니다. 그러나 일반적인 window.location 인터페이스에 의존합니다.

React 관련 솔루션을 찾고 있다면 계속 읽으십시오.

React Router를 통해 현재 URL 가져오기

React는 history-package를 제공하고 props를 통해 location 객체를 분리합니다. 본질적으로 window 인터페이스에서 사용할 수 있는 동일한 location 객체이지만 React에 맞게 사용자 정의됩니다.

이 객체는 앱의 현재 URL을 나타냅니다. 접근하는 가장 쉬운 방법은 props의 location 개체를 읽는 것입니다.

하지만 props를 통해 location을 제공하기 위해서는 React Router를 설치해야 하고 자식 컴포넌트는 Route 컴포넌트에 연결해야 합니다. 예를 들어:

<Route path="/" component={App}></Route>

이 예에서 App 구성 요소는 props를 통해 location 개체에 액세스할 수 있습니다. 이 구성 요소 내에서 루트 도메인을 포함하지 않는 경로 URL을 반환하는 this.props.location.pathname을 읽을 수 있습니다.

<Route> 구성 요소로 렌더링된 하위 구성 요소도 location props에 액세스할 수 있습니다. 다음은 예입니다.

<Route path="/" render={() => <App></App>} />

이 경우 앱 구성 요소는 location 소품에 계속 액세스할 수 있습니다.

this.props.location이 undefined를 반환하면 React 구성 요소가 맞춤 <Route> 구성 요소 외부에서 렌더링될 가능성이 큽니다. 이 경우 고차 컴포넌트(HOC) withRouter를 가져와 location 및 history 소품에 액세스하는 데 사용할 수 있습니다.

withRouter는 react-router-dom 패키지에서 가져올 수 있습니다. 다음은 예입니다.

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
class App extends Component {
      render(){...}
}

export default withRouter(App)

withRouter HOC에서 기본 내보내기 App 구성 요소를 래핑하면 특별한 <Route> 구성 요소로 렌더링된 구성 요소에만 사용할 수 있는 props에 액세스할 수 있습니다.

현재 URL React 라우터 후크 가져오기

기능적 구성 요소를 사용하면 후크를 사용할 수 있습니다. 우리 상황에서 useLocation()은 location 객체에 쉽게 액세스할 수 있는 방법을 제공하는 훌륭한 후크입니다.

react-router-dom 패키지에서 가져올 수 있습니다. 이 예제는 useLocation() 후크를 사용하여 location 객체를 가져와 변수에 저장합니다.

살펴보겠습니다.

import { useLocation } from "react-router-dom"
const sampleLocation = useLocation();

location 객체를 변수에 저장하면 sampleLocation.pathname에 액세스하여 경로(루트 도메인이 없는 URL)에 액세스할 수 있습니다.

history 개체의 location 속성에 액세스할 수도 있습니다.

useHistory 후크를 사용하면 액세스할 수 있습니다. 그러나 변경 가능성 문제로 인해 공식 react-router 문서는 location 객체를 고수할 것을 권장합니다.