React로 현재 전체 URL을 개발시겠습니까?

React로 현재 전체 URL을 개발시겠습니까?

---

ReactJS 구성 요소 내에서 전체 URL을 어떻게 얻습니까?

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

---

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

---

this.props.location반응 라우터 기능 입니다. 설치해야합니다.

참고 : 전체 URL을 반환합니다.

---

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 감사합니다!

---

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

호출 this.props.location하는 구성 <Route />요소가 다음과 같은 구성 요소 내부에 있는지 확인해야합니다 .

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

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

---

다른 누군가가 언급했듯이 먼저 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 확인

참고 URL : https://stackoverflow.com/questions/39823681/read-the-current-full-url-with-react