Читати поточну повну URL-адресу за допомогою React?

Як отримати повну URL-адресу з компонента ReactJS?

Я думаю, що це має бути щось на кшталт, this.props.locationале це такundefined

window.location.href це те, що ви шукаєте.

Якщо вам потрібен повний шлях вашої URL-адреси, ви можете використовувати ванільний Javascript:

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

то в React.Component в межах "Маршруту" ви можете зателефонувати:

this.props.location.pathname

Це повертає шлях, не включаючи доменне ім’я.

Дякую @ abdulla-zulqarnain!

this.props.locationє функцією маршрутизатора реагування , вам доведеться встановити, якщо ви хочете ним користуватися.

Примітка: не повертає повну URL-адресу.

Ви отримуєте, undefinedтому що у вас, ймовірно, є компоненти поза React Router.

Пам'ятайте, що вам потрібно переконатися, що компонент, від якого ви телефонуєте, this.props.locationзнаходиться всередині такого <Route />компонента, як цей:

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

Тоді всередині компонента панелі інструментів ви маєте доступ до this.props.location...

Щоб отримати поточний маршрутизатор примірника або поточне місце розташування , ви повинні створити компонент більш високого порядку withRouter з 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-адреси за допомогою ванільного Javascript, використовуючи let urlElements = window.location.href.split('/')

Тоді ми console.log(urlElements)побачили б масив елементів, створений за допомогою виклику .split () в URL.

Виявивши, до якого індексу в масиві ви хочете отримати доступ, ви можете призначити його змінній

let urlElelement = (urlElements[0])

Тепер ви можете використовувати значення urlElement, яке буде конкретною частиною вашої URL-адреси, де завгодно.

Як хтось ще згадував, спочатку вам потрібен 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, він реалізований таким чином головним чином , щоб уникнути створення нового елемента без необхідності.

PS: Звичайно, ви не обмежені старовинними браузерами, можливо, ви хочете спробувати new URL()щось, але в основному вся ситуація є більш-менш безглуздою, оскільки ви отримуєте доступ до глобальної змінної тим чи іншим способом. То чому б не використовувати window.location.hrefзамість цього?

Ви можете отримати повний uri / url за допомогою "document.referrer"

Перевірте https://developer.mozilla.org/en-US/docs/Web/API/Document/referrer