Блог

Как мне получить полный URL-адрес из компонента ReactJS?

Я думаю, это должно быть что-то вроде this.props.location , но это undefined

window.location.href это то, что вы ищете.

Если вам нужен полный путь к вашему URL-адресу, вы можете использовать ванильный 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 — W3Schools

Если вы еще не используете «react-router», вы можете установить его с помощью:

yarn add react-router

затем в React.Компонент внутри «Маршрута», вы можете вызвать:

this.props.location.pathname

Это возвращает путь, не включая имя домена.

Спасибо @abdulla-zulqarnain!

window.location.href это то, что вам нужно. Но также, если вы используете react router, вам может быть полезно проверить перехваты useLocation и useHistory. Оба создают объект с атрибутом pathname, который вы можете прочитать, и полезны для множества других вещей. Вот видео на YouTube, объясняющее перехваты маршрутизатора react

Оба дадут вам то, что вам нужно (без имени домена):

 import { useHistory ,useLocation } from 'react-router-dom';
const location = useLocation()
location.pathname

const history = useHistory()
history.location.pathname
  

this.props.location это функция react-router, которую вам нужно установить, если вы хотите ее использовать.

Примечание: не возвращает полный URL-адрес.

Вы получаете undefined , потому что у вас, вероятно, есть компоненты вне маршрутизатора React.

Помните, что вам нужно убедиться, что компонент, из которого вы вызываете this.props.location , находится внутри такого <Route /> компонента, как этот:

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

Затем внутри компонента Dashboard у вас есть доступ к this.props.location …

Простой JS :

 window.location.href // Returns full path, with domain name
window.location.origin // returns window domain url Ex : "https://stackoverflow.com"
window.location.pathname // returns relative path, without domain name
  

Использование react-router

 this.props.location.pathname // returns relative path, without domain name
  

С помощью react Hook

 const location = useLocation(); // React Hook
console.log(location.pathname); // returns relative path, without domain name
  

Просто чтобы добавить немного дополнительной документации на эту страницу — я некоторое время боролся с этой проблемой.

Как было сказано выше, самый простой способ получить URL-адрес — через window.location.href .

затем мы можем извлечь части URL-адреса с помощью ванильного Javascript, используя let urlElements = window.location.href.split('/')

Затем мы console.log(urlElements) бы увидели массив элементов, созданных вызовом .split() по URL-адресу.

После того, как вы нашли, к какому индексу в массиве вы хотите получить доступ, вы можете присвоить его переменной

 let urlElelement = (urlElements[0])
  

И теперь вы можете использовать значение urlElement , которое будет определенной частью вашего URL, где бы вы ни захотели.

Чтобы получить текущий экземпляр маршрутизатора или текущее местоположение, вы должны создать компонент более высокого порядка с withRouter помощью from 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)
  

Прочитав это, я нашел решение React / NextJs . Потому что, если мы используем непосредственно используемый window.location.href в react или nextjs, он выдает ошибку, например

Ошибка сервера ReferenceError: окно не определено

 import React, { useState, useEffect } from "react";
const Product = ({ product }) => {
 const [pageURL, setPageURL] = useState(0);
  useEffect(() => {
    setPageURL(window.location.href);
  })
  return (
     <div>
       <h3>{pageURL}</h3>
      </div>
  );
};
  

https://medium.com/frontend-digest/why-is-window-not-defined-in-nextjs-44daf7b4604e#:~:text=NextJS is a framework that,is not run in%
Примечание 20NodeJS:.

Как уже упоминал кто-то другой, сначала вам нужен 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-адрес.

Для memoize меня обычно lodash это реализовано таким образом, в основном, чтобы избежать создания нового элемента без необходимости.

PS: Конечно, если вы не ограничены древними браузерами, вы можете попробовать new URL() , но в основном вся ситуация более или менее бессмысленна, потому что вы получаете доступ к глобальной переменной тем или иным способом. Так почему бы не использовать window.location.href вместо этого?