Odczytać aktualny pełny adres URL za pomocą Reacta?

Jak uzyskać pełny adres URL z komponentu ReactJS?

Myślę, że powinno to być coś takiego, this.props.locationale tak jestundefined

window.location.href jest tym, czego szukasz.

Jeśli potrzebujesz pełnej ścieżki adresu URL, możesz użyć zwykłego JavaScript:

window.location.href

Aby uzyskać tylko ścieżkę (bez nazwy domeny), możesz użyć:

window.location.pathname

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

Źródło: Właściwość nazwy ścieżki lokalizacji - W3Schools

Jeśli jeszcze nie używasz „React-router”, możesz go zainstalować za pomocą:

yarn add react-router

następnie w React.Component w ramach „Route” możesz wywołać:

this.props.location.pathname

Zwraca ścieżkę, bez nazwy domeny.

Dzięki @ abdulla-zulqarnain!

this.props.locationjest funkcją routera reagującego , musisz ją zainstalować, jeśli chcesz z niej korzystać.

Uwaga: nie zwraca pełnego adresu URL.

Otrzymujesz, undefinedponieważ prawdopodobnie masz komponenty poza React Router.

Pamiętaj, że musisz się upewnić, że komponent, z którego dzwonisz, this.props.locationznajduje się wewnątrz <Route />komponentu takiego jak ten:

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

Następnie w komponencie Dashboard masz dostęp do this.props.location...

Aby uzyskać bieżącą instancję routera lub bieżącą lokalizację , musisz utworzyć komponent wyższego rzędu z withRouter from react-router-dom. w przeciwnym razie, gdy próbujesz uzyskać dostęp this.props.location, powróci undefined

Przykład

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

class className extends Component {

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

export default withRouter(className)

Żeby dodać trochę dalszej dokumentacji do tej strony - od jakiegoś czasu zmagam się z tym problemem.

Jak wspomniano powyżej, najłatwiejszym sposobem uzyskania adresu URL jest skorzystanie z window.location.href.

możemy następnie wyodrębnić części adresu URL za pomocą zwykłego kodu JavaScript przy użyciu let urlElements = window.location.href.split('/')

Wtedy console.log(urlElements)zobaczylibyśmy tablicę elementów utworzoną przez wywołanie .split () w adresie URL.

Po znalezieniu indeksu w tablicy, do którego chcesz uzyskać dostęp, możesz przypisać go do zmiennej

let urlElelement = (urlElements[0])

Teraz możesz użyć wartości urlElement, która będzie określoną częścią adresu URL, gdziekolwiek chcesz.

Jak ktoś inny wspomniał, najpierw potrzebujesz react-routerpakietu. Ale locationobiekt, który Ci dostarcza, zawiera przeanalizowany adres URL.

Ale jeśli chcesz mieć pełny adres URL bez dostępu do zmiennych globalnych, myślę, że najszybszym sposobem byłoby to zrobić

...

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

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

  ...

href to ten, który zawiera pełny adres URL.

Ponieważ memoizezwykle używam lodash, jest to realizowane głównie po to, aby uniknąć tworzenia nowego elementu bez konieczności.

PS: Oczywiście nie jesteś ograniczony przez starożytne przeglądarki, które możesz chcieć wypróbować new URL(), ale w zasadzie cała sytuacja jest mniej więcej bezcelowa, ponieważ uzyskujesz dostęp do zmiennej globalnej w taki czy inny sposób. Dlaczego więc nie użyć window.location.hrefzamiast tego?

Możesz uzyskać dostęp do pełnego adresu URL / adresu URL za pomocą „document.referrer”

Sprawdź https://developer.mozilla.org/en-US/docs/Web/API/Document/referrer