Прочитать текущий полный 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"

Источник: свойство Location pathname - W3Schools

Если вы еще не используете «response-router», вы можете установить его, используя:

yarn add react-router

затем в React.Component внутри "Route" вы можете вызвать:

this.props.location.pathname

Это возвращает путь, не включая доменное имя.

Спасибо @ abdulla-zulqarnain!

this.props.locationэто функция реактивного маршрутизатора , вам придется установить, если вы хотите ее использовать.

Примечание: не возвращает полный URL.

Вы получаете, undefinedпотому что у вас, вероятно, есть компоненты за пределами React Router.

Помните, что вам нужно убедиться, что компонент, из которого вы вызываете, this.props.locationнаходится внутри такого <Route />компонента, как этот:

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

Затем внутри компонента 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-адреса через ванильный 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