อ่าน URL เต็มปัจจุบันด้วย React?

ฉันจะรับ URL แบบเต็มจากภายในคอมโพเนนต์ ReactJS ได้อย่างไร

ฉันคิดว่ามันควรจะเป็นสิ่งที่เหมือนthis.props.locationแต่มันเป็นundefined

window.location.href คือสิ่งที่คุณกำลังมองหา

หากคุณต้องการเส้นทางแบบเต็มของ URL คุณสามารถใช้ vanilla Javascript:

window.location.href

หากต้องการรับเพียงเส้นทาง (ลบชื่อโดเมน) คุณสามารถใช้:

window.location.pathname

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

ที่มา: Location pathname Property - W3Schools

หากคุณยังไม่ได้ใช้ "react-router" คุณสามารถติดตั้งได้โดยใช้:

yarn add react-router

จากนั้นใน React.Component ภายใน "เส้นทาง" คุณสามารถโทร:

this.props.location.pathname

สิ่งนี้จะส่งคืนเส้นทางโดยไม่รวมชื่อโดเมน

ขอบคุณ @ abdulla-zulqarnain!

this.props.locationเป็นคุณสมบัติตอบสนองเราเตอร์คุณจะต้องติดตั้งหากต้องการใช้งาน

หมายเหตุ: ไม่ส่งคืน URL แบบเต็ม

คุณได้รับundefinedเนื่องจากคุณอาจมีส่วนประกอบนอก React Router

จำไว้ว่าคุณต้องตรวจสอบให้แน่ใจว่าส่วนประกอบที่คุณกำลังเรียกใช้this.props.locationนั้นอยู่ภายใน<Route />ส่วนประกอบเช่นนี้:

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

จากนั้นภายในส่วนประกอบแดชบอร์ดคุณสามารถเข้าถึงthis.props.location...

เพื่อให้ได้ตัวอย่างเช่นเราเตอร์ในปัจจุบันหรือตำแหน่งปัจจุบันของคุณต้องสร้างองค์ประกอบการสั่งซื้อที่สูงขึ้นด้วยจากwithRouter react-router-domมิฉะนั้นเมื่อคุณพยายามเข้าถึงthis.props.locationจะกลับมา undefined

ตัวอย่าง

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

class className extends Component {

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

export default withRouter(className)

เพียงเพื่อเพิ่มเอกสารเพิ่มเติมเล็กน้อยในหน้านี้ - ฉันต่อสู้กับปัญหานี้มาระยะหนึ่งแล้ว

ดังที่กล่าวไว้ข้างต้นวิธีที่ง่ายที่สุดในการรับ URL คือผ่าน window.location.hrefที่เป็นทาง

จากนั้นเราสามารถแยกบางส่วนของ URL ผ่าน vanilla Javascript โดยใช้ let urlElements = window.location.href.split('/')

จากนั้นเราก็จะ console.log(urlElements)เห็น Array ขององค์ประกอบที่สร้างโดยการเรียก. split () บน URL

เมื่อคุณพบดัชนีในอาร์เรย์ที่คุณต้องการเข้าถึงแล้วคุณสามารถกำหนดสิ่งนี้ให้กับตัวแปรได้

let urlElelement = (urlElements[0])

และตอนนี้คุณสามารถใช้ค่าของ urlElement ซึ่งจะเป็นส่วนเฉพาะของ URL ของคุณได้ทุกที่ที่คุณต้องการ

อย่างที่ใคร ๆ กล่าวไว้ก่อนอื่นคุณต้องมีreact-routerแพ็คเกจ แต่locationวัตถุที่ให้คุณมี url ที่แยกวิเคราะห์

แต่ถ้าคุณต้องการ url แบบเต็มโดยไม่ต้องเข้าถึงตัวแปรส่วนกลางฉันเชื่อว่าวิธีที่เร็วที่สุดในการทำเช่นนั้นคือ

...

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

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

  ...

href คือ URL ที่มี URL แบบเต็ม

สำหรับmemoizeฉันมักจะใช้lodashมันใช้วิธีนี้เป็นส่วนใหญ่เพื่อหลีกเลี่ยงการสร้างองค์ประกอบใหม่โดยไม่จำเป็น

PS: แน่นอนว่าคุณไม่ได้ถูก จำกัด โดยเบราว์เซอร์โบราณที่คุณอาจต้องการลองทำnew URL()แต่โดยทั่วไปแล้วสถานการณ์ทั้งหมดนั้นไม่มีจุดหมายมากหรือน้อยเพราะคุณเข้าถึงตัวแปรทั่วโลกไม่ทางใดก็ทางหนึ่ง แล้วทำไมไม่ใช้window.location.hrefแทนล่ะ?

คุณสามารถเข้าถึง uri / url แบบเต็มได้ด้วย 'document.referrer'

ตรวจสอบhttps://developer.mozilla.org/en-US/docs/Web/API/Document/referrer