Reactで現在の完全なURLを読みますか？

ReactJSコンポーネント内から完全なURLを取得するにはどうすればよいですか？

私はそれが次のようなものであるべきだと思っています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"

ソース：ロケーションパス名プロパティ-W3Schools

「react-router」をまだ使用していない場合は、次を使用してインストールできます。

yarn add react-router

次に、「ルート」内のReact.Componentで、次を呼び出すことができます。

this.props.location.pathname

これは、ドメイン名を含まないパスを返します。

ありがとう@ abdulla-zulqarnain！

this.props.location反応ルーター機能です。使用する場合はインストールする必要があります。

注：完全なURLは返されません。

あなたは得ています undefinedあなたは、おそらくコンポーネントが外部のルータに反応したため。

呼び出し元this.props.locationの<Route />コンポーネントが次のようなコンポーネント内にあることを確認する必要があることに注意してください。

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

次に、ダッシュボードコンポーネント内で、this.props.location...にアクセスできます。

現在のルーターインスタンスまたは現在の場所を取得するには、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)

このページにもう少しドキュメントを追加するだけです-私はこの問題にしばらく取り組んでいます。

上記のように、URLを取得する最も簡単な方法はを使用することwindow.location.hrefです。

次に、以下を使用して、バニラJavascriptを介してURLの一部を抽出できます。 let urlElements = window.location.href.split('/')

次にconsole.log(urlElements)、URLで.split（）を呼び出して生成された要素の配列を確認します。

アクセスしたい配列のインデックスが見つかったら、これを変数に割り当てることができます

let urlElelement = (urlElements[0])

これで、URLの特定の部分となるurlElementの値をどこでも使用できます。

他の誰かが述べたように、最初に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代わりに使用しないのですか？

「document.referrer」で完全なuri / urlにアクセスできます

https://developer.mozilla.org/en-US/docs/Web/API/Document/referrerを確認してください