Прочитать текущий полный URL-адрес с помощью React?

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

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

ОТВЕТЫ

Ответ 1

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

Ответ 3

Если вам нужен полный путь вашего 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"

Ответ 4

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

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

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

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

Ответ 5

Как кто-то еще упомянул, для начала вам нужен пакет 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?

Ответ 6

Пытаться:

this.props.match.params