Đọc toàn bộ URL hiện tại với React?

Làm cách nào để lấy URL đầy đủ từ bên trong thành phần ReactJS?

Tôi nghĩ nó phải là một cái gì đó như thế this.props.locationnhưng nó làundefined

window.location.href là những gì bạn đang tìm kiếm.

Nếu bạn cần đường dẫn đầy đủ của URL, bạn có thể sử dụng Javascript vani:

window.location.href

Để chỉ lấy đường dẫn (trừ tên miền), bạn có thể sử dụng:

window.location.pathname

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

Nguồn: Location pathname Property - W3Schools

Nếu bạn chưa sử dụng "react-router", bạn có thể cài đặt nó bằng cách sử dụng:

yarn add react-router

thì trong React.Component trong "Lộ trình", bạn có thể gọi:

this.props.location.pathname

Điều này trả về đường dẫn, không bao gồm tên miền.

Cảm ơn @ Abdulla-zulqarnain!

this.props.locationlà một tính năng của bộ định tuyến phản ứng , bạn sẽ phải cài đặt nếu muốn sử dụng nó.

Lưu ý: không trả về url đầy đủ.

Bạn nhận được undefinedbởi vì bạn có thể có các thành phần bên ngoài Bộ định tuyến React.

Hãy nhớ rằng bạn cần đảm bảo rằng thành phần mà bạn đang gọi this.props.locationnằm bên trong một <Route />thành phần chẳng hạn như sau:

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

Sau đó, bên trong thành phần Trang tổng quan, bạn có quyền truy cập vào this.props.location...

Để có được phiên bản router hiện tại hoặc vị trí hiện tại, bạn phải tạo một thành phần thứ tự cao hơn với withRouter from react-router-dom. nếu không, khi bạn đang cố gắng truy cập, this.props.locationnó sẽ trả về undefined

Thí dụ

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

class className extends Component {

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

export default withRouter(className)

Chỉ để thêm một chút tài liệu bổ sung vào trang này - tôi đã vật lộn với vấn đề này trong một thời gian.

Như đã nói ở trên, cách dễ nhất để lấy URL là thông qua window.location.href.

sau đó chúng tôi có thể trích xuất các phần của URL thông qua Javascript vani bằng cách sử dụng let urlElements = window.location.href.split('/')

Sau đó, chúng ta sẽ console.log(urlElements)thấy Mảng các phần tử được tạo ra bằng cách gọi .split () trên URL.

Khi bạn đã tìm thấy chỉ mục nào trong mảng bạn muốn truy cập, bạn có thể gán chỉ mục này cho một biến

let urlElelement = (urlElements[0])

Và bây giờ bạn có thể sử dụng giá trị của urlElement, đây sẽ là phần cụ thể của URL của bạn, bất cứ nơi nào bạn muốn.

Như ai đó đã đề cập, trước tiên bạn cần react-routergói. Nhưng locationđối tượng mà nó cung cấp cho bạn có chứa url được phân tích cú pháp.

Nhưng nếu bạn muốn có url đầy đủ mà không cần truy cập các biến toàn cục, tôi tin rằng cách nhanh nhất để làm điều đó sẽ là

...

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

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

  ...

href là một trong những chứa một url đầy đủ.

Đối với memoizetôi thường sử dụng lodash, nó được triển khai theo cách đó chủ yếu để tránh tạo phần tử mới mà không cần thiết.

Tái bút: Tất nhiên là bạn không bị giới hạn bởi các trình duyệt cổ, bạn có thể muốn thử new URL()điều đó, nhưng về cơ bản toàn bộ tình huống ít nhiều là vô nghĩa, bởi vì bạn truy cập biến toàn cục theo cách này hay cách khác. Vậy tại sao không sử dụng window.location.hrefthay thế?

Bạn có thể truy cập vào tiểu / url đầy đủ bằng 'document.referrer'

Kiểm tra https://developer.mozilla.org/en-US/docs/Web/API/Document/referrer