React로 현재 전체 URL을 읽으시겠습니까?

ReactJS 컴포넌트 내에서 전체 URL을 어떻게 얻습니까?

나는 그것이 다음과 같아야한다고 생각 this.props.location하지만 그것은undefined

window.location.href 당신이 찾고있는 것입니다.

URL의 전체 경로가 필요한 경우 바닐라 자바 ​​스크립트를 사용할 수 있습니다.

window.location.href

경로 (도메인 이름 제외) 만 얻으려면 다음을 사용할 수 있습니다.

window.location.pathname

console.log(window.location.pathname); //yields: "/js" (where snippets run)
console.log(window.location.href);     //yields: "https://stacksnippets.net/js"

출처 : 위치 경로명 속성-W3Schools

아직 "react-router"를 사용하고 있지 않다면 다음을 사용하여 설치할 수 있습니다.

yarn add react-router

그런 다음 "Route"내의 React.Component에서 다음을 호출 할 수 있습니다.

this.props.location.pathname

도메인 이름을 포함하지 않는 경로를 반환합니다.

감사합니다 @ abdulla-zulqarnain!

this.props.location반응 라우터 기능 이므로 사용하려면 설치해야합니다.

참고 : 전체 URL을 반환하지 않습니다.

undefinedReact Router 외부에 구성 요소 가 있기 때문에 얻는 것입니다.

호출 this.props.location하는 <Route />컴포넌트가 다음과 같은 컴포넌트 내부에 있는지 확인해야합니다 .

<Route path="/dashboard" component={Dashboard} />

그런 다음 대시 보드 구성 요소 내에서 액세스 할 수 있습니다 this.props.location.

현재 라우터 인스턴스 또는 현재 위치 를 가져 오려면 withRouter from 을 사용하여 상위 구성 요소를 만들어야합니다 react-router-dom. 그렇지 않으면 액세스를 시도 할 때this.props.location 그것은 반환 undefined

예

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';

class className extends Component {

      render(){
           return(
                ....
                  )
              }
}

export default withRouter(className)

이 페이지에 약간의 추가 문서를 추가하기 위해-나는이 문제로 한동안 고심하고 있습니다.

위에서 말했듯이 URL을 얻는 가장 쉬운 방법은를 사용하는 것 window.location.href입니다.

그런 다음 바닐라 자바 ​​스크립트를 통해 URL의 일부를 추출 할 수 있습니다. let urlElements = window.location.href.split('/')

그런 다음 console.log(urlElements)URL에서 .split ()을 호출하여 생성 된 요소 배열을 볼 수 있습니다.

배열에서 액세스하려는 인덱스를 찾으면이를 변수에 할당 할 수 있습니다.

let urlElelement = (urlElements[0])

이제 원하는 곳에서 URL의 특정 부분이 될 urlElement의 값을 사용할 수 있습니다.

다른 누군가가 언급했듯이 먼저 react-router패키지 가 필요 합니다. 그러나 location제공하는 개체에는 구문 분석 된 URL이 포함되어 있습니다.

그러나 전역 변수에 액세스하지 않고 전체 URL을 나쁘게 원한다면 가장 빠른 방법은

...

const getA = memoize(() => document.createElement('a'));
const getCleanA = () => Object.assign(getA(), { href: '' });

const MyComponent = ({ location }) => {
  const { href } = Object.assign(getCleanA(), location);

  ...

href 전체 URL을 포함하는 것입니다.

들어 memoize난 보통 사용 lodash, 대부분의 방법이 필요없이 새로운 요소를 생성하지 않도록하는 것을 구현합니다.

추신 : 물론 당신이 시도하고 싶은 고대 브라우저에 의해 제한되지는 new URL()않지만 기본적으로 전역 변수에 액세스하기 때문에 전체 상황은 다소 무의미합니다. 그렇다면 window.location.href대신 사용하지 않는 이유는 무엇입니까?

'document.referrer'로 전체 URI / URL에 액세스 할 수 있습니다.

검사 https://developer.mozilla.org/en-US/docs/Web/API/Document/referrer