Baca URL lengkap saat ini dengan React?

Bagaimana cara mendapatkan URL lengkap dari dalam komponen ReactJS?

Saya pikir itu harus seperti this.props.locationitu tetapi itu benarundefined

window.location.href adalah yang Anda cari.

Jika Anda membutuhkan jalur lengkap dari URL Anda, Anda dapat menggunakan vanilla Javascript:

window.location.href

Untuk mendapatkan jalur saja (tanpa nama domain), Anda dapat menggunakan:

window.location.pathname

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

Sumber: Nama jalur lokasi Properti - W3Schools

Jika Anda belum menggunakan "react-router", Anda dapat menginstalnya menggunakan:

yarn add react-router

lalu di React.Component dalam "Route", Anda dapat memanggil:

this.props.location.pathname

Ini mengembalikan jalur, tidak termasuk nama domain.

Terima kasih @ abdulla-zulqarnain!

this.props.locationadalah fitur react-router , Anda harus menginstalnya jika ingin menggunakannya.

Catatan: tidak mengembalikan url lengkap.

Anda mendapatkan undefinedkarena Anda mungkin memiliki komponen di luar React Router.

Ingatlah bahwa Anda perlu memastikan bahwa komponen yang Anda panggil this.props.locationada di dalam <Route />komponen seperti ini:

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

Kemudian di dalam komponen Dashboard, Anda memiliki akses ke this.props.location...

Untuk mendapatkan instance router saat ini atau lokasi saat ini Anda harus membuat komponen Higher order dengan withRouter from react-router-dom. jika tidak, ketika Anda mencoba mengaksesnya this.props.locationakan kembali undefined

Contoh

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

class className extends Component {

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

export default withRouter(className)

Hanya untuk menambahkan sedikit dokumentasi lebih lanjut ke halaman ini - Saya telah berjuang dengan masalah ini untuk sementara waktu.

Seperti yang dikatakan di atas, cara termudah untuk mendapatkan URL adalah melalui window.location.href.

kita kemudian dapat mengekstrak bagian-bagian URL melalui vanilla Javascript dengan menggunakan let urlElements = window.location.href.split('/')

Kami kemudian akan console.log(urlElements)melihat Array elemen yang dihasilkan dengan memanggil .split () di URL.

Setelah Anda menemukan indeks mana dalam larik yang ingin Anda akses, Anda dapat menetapkan ini ke variabel

let urlElelement = (urlElements[0])

Dan sekarang Anda dapat menggunakan nilai urlElement, yang akan menjadi bagian spesifik dari URL Anda, di mana pun Anda inginkan.

Seperti yang disebutkan orang lain, pertama Anda membutuhkan react-routerpaket. Tetapi locationobjek yang diberikannya berisi url yang diuraikan.

Tetapi jika Anda sangat menginginkan url lengkap tanpa mengakses variabel global, saya yakin cara tercepat untuk melakukannya adalah

...

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

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

  ...

href adalah yang berisi url lengkap.

Untuk yang memoizebiasanya saya gunakan lodash, ini diterapkan seperti itu untuk menghindari pembuatan elemen baru tanpa perlu.

PS: Tentu saja Anda tidak dibatasi oleh browser kuno Anda mungkin ingin mencobanya new URL(), tetapi pada dasarnya seluruh situasi kurang lebih tidak ada gunanya, karena Anda mengakses variabel global dengan satu atau lain cara. Jadi mengapa tidak menggunakan window.location.hrefsaja?

Anda dapat mengakses uri / url lengkap dengan 'document.referrer'

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