React ile mevcut tam URL'yi okudunuz mu?

Tam URL'yi bir ReactJS bileşeninden nasıl alabilirim?

Sanırım böyle bir şey olmalı this.props.locationama öyleundefined

window.location.href aradığınız şey.

URL'nizin tam yoluna ihtiyacınız varsa, vanilya Javascript kullanabilirsiniz:

window.location.href

Yalnızca yolu (eksi alan adı) elde etmek için şunları kullanabilirsiniz:

window.location.pathname

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

Kaynak: Konum yol adı Mülk - W3Schools

Zaten "react-router" kullanmıyorsanız, şunu kullanarak kurabilirsiniz:

yarn add react-router

daha sonra bir "Route" içindeki bir React.Component içinde şu çağrıları yapabilirsiniz:

this.props.location.pathname

Bu, alan adını içermeyen yolu döndürür.

Teşekkürler @ abdulla-zulqarnain!

this.props.locationbir react-router özelliğidir , kullanmak istiyorsanız yüklemeniz gerekir.

Not: tam url'yi döndürmez.

undefinedMuhtemelen bileşenlere React Router'ın dışında sahip olduğunuz için alıyorsunuz .

Çağırdığınız bileşenin şunun gibi this.props.locationbir <Route />bileşenin içinde olduğundan emin olmanız gerektiğini unutmayın :

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

Ardından, Gösterge Tablosu bileşeninin içinde şunlara erişebilirsiniz this.props.location...

Almak için yönlendirici örneği geçerli veya Geçerli konum size bir Yüksek mertebeden bileşeni oluşturmak zorunda withRouter dan react-router-dom. aksi halde erişmeye çalıştığınızda this.props.locationgeri dönecektir undefined

Misal

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

class className extends Component {

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

export default withRouter(className)

Sadece bu sayfaya biraz daha fazla belge eklemek için - Bir süredir bu sorunla uğraşıyorum.

Yukarıda belirtildiği gibi, URL'yi almanın en kolay yolu yoluyladır window.location.href.

daha sonra URL'nin bazı kısımlarını vanilya Javascript ile çıkarabiliriz. let urlElements = window.location.href.split('/')

Daha sonra console.log(urlElements), URL'de .split () çağırarak üretilen öğe Dizisini görürüz.

Dizideki hangi dizine erişmek istediğinizi bulduğunuzda, bunu bir değişkene atayabilirsiniz.

let urlElelement = (urlElements[0])

Ve şimdi URL'nizin belirli bir parçası olacak urlElement değerini istediğiniz yerde kullanabilirsiniz.

Başkasının da bahsettiği gibi, önce react-routerpakete ihtiyacınız var . Ancak locationsize sağladığı nesne ayrıştırılmış url içeriyor.

Ancak, global değişkenlere erişmeden tam url'yi kötü bir şekilde istiyorsanız, bunu yapmanın en hızlı yolunun

...

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

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

  ...

href tam bir url içeren olandır.

Çoğunlukla memoizekullanıyorum lodash, bu çoğunlukla zorunluluk olmadan yeni unsurlar yaratmaktan kaçınmak için uygulanıyor.

Not: Elbette eski tarayıcılar tarafından kısıtlanmıyorsunuz, bir new URL()şeyler denemek isteyebilirsiniz , ancak temelde tüm durum aşağı yukarı anlamsız çünkü küresel değişkene şu veya bu şekilde erişiyorsunuz. Öyleyse neden window.location.hrefbunun yerine kullanılmasın?

Tam uri / url'ye 'document.referrer' ile erişebilirsiniz.

Https://developer.mozilla.org/en-US/docs/Web/API/Document/referrer adresini kontrol edin