Baca URL lengkap saat ini dengan React?

137

Bagaimana cara mendapatkan URL lengkap dari dalam komponen ReactJS?

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

reactjs Doug
sumber

Jawaban:

220

window.location.href adalah yang Anda cari.

mungkin
sumber
16
Harap dicatat bahwa ini mungkin memiliki masalah di sisi server, jika tidak dikonfigurasi dengan benar.
Shota
2
Saya membutuhkan window.location untuk fitur di sisi klien. Jadi saya mengatur lokasi di status onMount komponen saya untuk menghindari masalah saat rendering di sisi server.
Arvind Sridharan
ini tidak bekerja. atau tolong bantu saya dengan struktur itu dalam bereaksi. Saya menggunakan const ddd = window.location.href; console.log (ddd);
Shurvir Mori
1
webpack akan mengeluh tentang pepatah 'jendela tidak ditentukan'
Franz Lihat
@Franz Lihat ya, tidak ada "jendela" dalam kode sisi server, jadi jika itu lingkungan Anda, Anda perlu menggunakan sesuatu seperti req.originalUrldari ekspres atau yang lainnya. Berbagai perpustakaan perutean reaksi yang memiliki dukungan SSR memiliki metode untuk mendapatkan informasi ini.
mungkin sampai
60

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"
Luaskan cuplikan

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!

lewdev
sumber
2
Anda dapat melakukan seperti itu untuk nama jalurwindow.location.pathname
Abdulla Zulqarnain
13

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...

James
sumber
3
Dan jika komponen Anda tidak ada di dalam, <Route />Anda dapat menggunakan komponen tingkat tinggi withRouter .
Ahmad Maleki
3

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)
Alex Varghese
sumber
2

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.

to240
sumber
0

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?

Yurii Haiovyi
sumber
-3

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

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

Amit Lopes
sumber
Perujuk adalah URL ke halaman tempat Anda berada sebelum mencapai halaman ini. Ini mungkin juga tidak disetel. Meskipun dapat berguna untuk melacak pergerakan pengguna, hal itu jarang yang Anda inginkan saat mencari URL.
Alexis Wilke