blocks|key|2073766|text|window.location.href是你要找的东西。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2073767|entityMap^0|0|K|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<code>window.location.href</code> is what you're looking for.

blocks|key|153422|text|如果需要URL的完整路径，可以使用普通Javascript：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|153423|window.location.href|offset|length|style|CODE|153424|要获得路径(减去域名)，可以使用：|153425|window.location.pathname|153426|​|153427|console.log(window.location.pathname);+//yields:+"/js"+(where+snippets+run)
console.log(window.location.href);+++++//yields:+"https://stacksnippets.net/js"|code-block|syntax|javascript|153428|153429|来源：位置路径名属性-+W3Schools|153430|如果您还没有使用“react路由器”，则可以使用以下方法安装：|153431|yarn+add+react-router|153432|然后，在“路由”内的React.Component中，您可以调用：|153433|this.props.location.pathname|153434|这将返回路径，不包括域名。|153435|谢谢阿不都拉-祖尔卡南！|153436|entityMap|0|LINK|mutability|MUTABLE|url|https://www.w3schools.com/jsref/prop_loc_pathname.asp^0|0|0|K|0|0|0|O|0|0|0|0|3|I|0|0|0|0|L|0|0|0|S|0|0|0^^$0|@$1|2|3|4|5|6|7|1F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1G|8|@$D|1H|E|1I|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|1J|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|1K|8|@$D|1L|E|1M|F|G]]|9|@]|A|$]]|$1|L|3|M|5|6|7|1N|8|@]|9|@]|A|$]]|$1|N|3|O|5|P|7|1O|8|@]|9|@]|A|$Q|R]]|$1|S|3|M|5|6|7|1P|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|1Q|8|@]|9|@$D|1R|E|1S|1|1T]]|A|$]]|$1|V|3|W|5|6|7|1U|8|@]|9|@]|A|$]]|$1|X|3|Y|5|6|7|1V|8|@$D|1W|E|1X|F|G]]|9|@]|A|$]]|$1|Z|3|10|5|6|7|1Y|8|@]|9|@]|A|$]]|$1|11|3|12|5|6|7|1Z|8|@$D|20|E|21|F|G]]|9|@]|A|$]]|$1|13|3|14|5|6|7|22|8|@]|9|@]|A|$]]|$1|15|3|16|5|6|7|23|8|@]|9|@]|A|$]]|$1|17|3|-4|5|6|7|24|8|@]|9|@]|A|$]]]|18|$19|$5|1A|1B|1C|A|$1D|1E]]]]

If you need the full path of your URL, you can use vanilla Javascript:

<code>window.location.href</code>

To get just the path (minus domain name), you can use:

<code>window.location.pathname</code>

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>console.log(window.location.pathname); //yields: "/js" (where snippets run)
console.log(window.location.href); //yields: "https://stacksnippets.net/js"</code></pre>
</div>
</div>


Source: <a href="https://www.w3schools.com/jsref/prop_loc_pathname.asp" rel="noreferrer">Location pathname Property - W3Schools</a>

If you are not already using "react-router" you can install it using:

<code>yarn add react-router</code>

then in a React.Component within a "Route", you can call:

<code>this.props.location.pathname</code>

This returns the path, not including the domain name.

Thanks @abdulla-zulqarnain!

blocks|key|2073994|text|window.location.href是你所需要的。但是，如果您使用的是react路由器，您可能会发现查看、useLocation、和useHistory钩子很有用。这两种方法都创建了一个具有路径名属性的对象，您可以读取该属性，并且对于其他一些东西都很有用。这里有一段youtube视频解释了路由器钩子的反应|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|BOLD|entityRanges|data|2073995|两者都会给你所需要的(没有域名)：|2073996|import+{+useHistory+,useLocation+}+from+'react-router-dom';
const+location+=+useLocation()
location.pathname

const+history+=+useHistory()
history.location.pathname|code-block|syntax|javascript|2073997|entityMap|0|LINK|mutability|MUTABLE|url|https://www.youtube.com/watch?v=CZeulkp1ClA^0|0|K|1I|D|1W|A|3M|P|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@$9|W|A|X|B|C]|$9|Y|A|Z|B|D]|$9|10|A|11|B|D]]|E|@$9|12|A|13|1|14]]|F|$]]|$1|G|3|H|5|6|7|15|8|@]|E|@]|F|$]]|$1|I|3|J|5|K|7|16|8|@]|E|@]|F|$L|M]]|$1|N|3|-4|5|6|7|17|8|@]|E|@]|F|$]]]|O|$P|$5|Q|R|S|F|$T|U]]]]

<code>window.location.href</code> is what you need. But also if you are using react router you might find useful checking out useLocation and useHistory hooks.
Both create an object with a pathname attribute you can read and are useful for a bunch of other stuff. <a href="https://www.youtube.com/watch?v=CZeulkp1ClA" rel="noreferrer">Here's a youtube video explaining react router hooks</a>
Both will give you what you need (without the domain name):
<pre><code>import { useHistory ,useLocation } from 'react-router-dom';
const location = useLocation()
location.pathname

const history = useHistory()
history.location.pathname
</code></pre>

blocks|key|2073819|text|是一种反应路由器功能。，如果您想使用它，就必须安装它。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2073820|注意:不返回完整的url。|2073821|entityMap|0|LINK|mutability|MUTABLE|url|https://reacttraining.com/react-router/web/api/location^0|0|B|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

<a href="https://reacttraining.com/react-router/web/api/location" rel="noreferrer"><code>this.props.location</code> is a react-router feature</a>, you'll have to install if you want to use it.

Note: doesn't return the full url.

blocks|key|153343|text|您正在获得undefined，因为您可能有外部的Reactive路由器组件。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|153344|请记住，您需要确保调用this.props.location的组件位于<Route+/>组件中，如下所示：|153345|<Route+path="/dashboard"+component={Dashboard}+/>|153346|然后在仪表板组件中，您可以访问this.props.location.|153347|entityMap^0|5|9|0|B|J|Z|9|0|0|1D|0|F|J|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|L|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|M|$]]

You are getting <code>undefined</code> because you probably have the components outside React Router.

Remember that you need to make sure that the component from which you are calling <code>this.props.location</code> is inside a <code>&lt;Route /&gt;</code> component such as this:

<code>&lt;Route path="/dashboard" component={Dashboard} /&gt;</code>

Then inside the Dashboard component, you have access to <code>this.props.location</code>...

blocks|key|153497|text|只是为了给这个页面添加一些更多的文档--我已经为这个问题挣扎了一段时间。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|153498|如前所述，获取网址的最简单方法是通过window.location.href。|offset|length|style|CODE|153499|然后，我们可以使用let+urlElements+=+window.location.href.split('/')通过香草Javascript提取部分URL。|153500|然后，我们将console.log(urlElements)来查看通过在URL上调用.split()而生成的元素数组。|153501|找到要访问的数组中的哪个索引之后，就可以将其分配给一个变量。|153502|let+urlElelement+=+(urlElements[0])|code-block|syntax|javascript|153503|现在，您可以使用urlElement的值，它将是您的URL的特定部分，在任何您想要的地方。|153504|entityMap^0|0|I|K|0|9|1D|0|6|O|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@$D|Y|E|Z|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|10|8|@$D|11|E|12|F|G]]|9|@]|A|$]]|$1|J|3|K|5|6|7|13|8|@$D|14|E|15|F|G]]|9|@]|A|$]]|$1|L|3|M|5|6|7|16|8|@]|9|@]|A|$]]|$1|N|3|O|5|P|7|17|8|@]|9|@]|A|$Q|R]]|$1|S|3|T|5|6|7|18|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|V|$]]

Just to add a little further documentation to this page - I have been struggling with this problem for a while.
As said above, the easiest way to get the URL is via <code>window.location.href</code>.
we can then extract parts of the URL through vanilla Javascript by using <code>let urlElements = window.location.href.split('/')</code>
We would then <code>console.log(urlElements)</code> to see the Array of elements produced by calling .split() on the URL.
Once you have found which index in the array you want to access, you can then assigned this to a variable
<pre><code>let urlElelement = (urlElements[0])
</code></pre>
And now you can use the value of urlElement, which will be the specific part of your URL, wherever you want.

blocks|key|345700|text|普通联合材料：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|345701|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|code-block|syntax|javascript|345702|使用反应路由器|345703|this.props.location.pathname+//+returns+relative+path,+without+domain+name|345704|使用反应钩|345705|const+location+=+useLocation();+//+React+Hook
console.log(location.pathname);+//+returns+relative+path,+without+domain+name|345706|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

Plain JS :
<pre><code>window.location.href // Returns full path, with domain name
window.location.origin // returns window domain url Ex : &quot;https://stackoverflow.com&quot;
window.location.pathname // returns relative path, without domain name
</code></pre>
Using react-router
<pre><code>this.props.location.pathname // returns relative path, without domain name
</code></pre>
Using react Hook
<pre><code>const location = useLocation(); // React Hook
console.log(location.pathname); // returns relative path, without domain name
</code></pre>

blocks|key|345573|text|要获得当前路由器实例或当前位置，您必须从react-router-dom创建具有withRouter的高阶组件。否则，当您试图访问this.props.location时，它将返回undefined|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|CODE|entityRanges|data|345574|示例|345575|import+React,+{+Component+}+from+'react';
import+{+withRouter+}+from+'react-router-dom';

class+className+extends+Component+{

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

export+default+withRouter(className)|code-block|syntax|javascript|345576|entityMap^0|3|7|B|4|K|G|14|A|1T|J|2I|9|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]|$9|S|A|T|B|C]|$9|U|A|V|B|D]|$9|W|A|X|B|D]|$9|Y|A|Z|B|D]|$9|10|A|11|B|D]]|E|@]|F|$]]|$1|G|3|H|5|6|7|12|8|@]|E|@]|F|$]]|$1|I|3|J|5|K|7|13|8|@]|E|@]|F|$L|M]]|$1|N|3|-4|5|6|7|14|8|@]|E|@]|F|$]]]|O|$]]

To get the current router instance or current location you have to create a Higher order component with <code>withRouter</code> from <code>react-router-dom</code>. otherwise, when you are trying to access <code>this.props.location</code> it will return <code>undefined</code>

Example

<pre><code>import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';

class className extends Component {

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

export default withRouter(className)
</code></pre>

blocks|key|2074045|text|阅读这篇文章，我找到了React+/+NextJs的解决方案。因为如果我们在react或nextjs中直接使用window.location.href，则会引发错误，如|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2074046|服务器错误ReferenceError:未定义窗口|blockquote|2074047|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>
++);
};|code-block|syntax|javascript|2074048|注：+https://medium.com/frontend-digest/why-is-window-not-defined-in-nextjs-44daf7b4604e#:~:text=NextJS%2520is%2520a%2520framework%2520that,is%2520not%2520run%2520in%2520NodeJS.|BOLD|2074049|entityMap|0|LINK|mutability|MUTABLE|url|https://medium.com/frontend-digest/why-is-window-not-defined-in-nextjs-44daf7b4604e#:%257E:text=NextJS%2520is%2520a%2520framework%2520that,is%2520not%2520run%2520in%2520NodeJS^0|B|E|1J|K|0|0|0|0|2|3|4B|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|13|8|@]|D|@]|E|$]]|$1|I|3|J|5|K|7|14|8|@]|D|@]|E|$L|M]]|$1|N|3|O|5|6|7|15|8|@$9|16|A|17|B|P]]|D|@$9|18|A|19|1|1A]]|E|$]]|$1|Q|3|-4|5|6|7|1B|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]]]

Read this I found the solution of <code>React / NextJs</code>. Because if we use directly used the <code>window.location.href</code> in react or nextjs it throw error like
<blockquote>
Server Error
ReferenceError: window is not defined
</blockquote>
<pre><code>import React, { useState, useEffect } from &quot;react&quot;;
const Product = ({ product }) =&gt; {
 const [pageURL, setPageURL] = useState(0);
 useEffect(() =&gt; {
 setPageURL(window.location.href);
 })
 return (
 &lt;div&gt;
 &lt;h3&gt;{pageURL}&lt;/h3&gt;
 &lt;/div&gt;
 );
};
</code></pre>
Note:
<a href="https://medium.com/frontend-digest/why-is-window-not-defined-in-nextjs-44daf7b4604e#:%7E:text=NextJS%20is%20a%20framework%20that,is%20not%20run%20in%20NodeJS" rel="noreferrer">https://medium.com/frontend-digest/why-is-window-not-defined-in-nextjs-44daf7b4604e#:~:text=NextJS%20is%20a%20framework%20that,is%20not%20run%20in%20NodeJS</a>.

blocks|key|2073917|text|正如其他人所提到的，首先您需要react-router包。但是它为您提供的location对象包含解析的url。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2073918|但是，如果您不需要访问全局变量就非常想要完整的url，我相信最快的方法是|2073919|...

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

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

++...|code-block|syntax|javascript|2073920|href包含一个完整的url。|2073921|对于memoize，我通常使用lodash，它的实现主要是为了避免不必要地创建新元素。|2073922|P.S.：当然，你不受古代浏览器的限制，你可能想试试new+URL()，但基本上整个情况或多或少都是毫无意义的，因为你以某种方式访问全局变量。那么，为什么不使用window.location.href呢？|2073923|entityMap^0|F|C|11|8|0|0|0|0|4|0|2|7|F|6|0|Q|9|28|K|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|11|8|@$9|12|A|13|B|C]]|D|@]|E|$]]|$1|O|3|P|5|6|7|14|8|@$9|15|A|16|B|C]|$9|17|A|18|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|6|7|19|8|@$9|1A|A|1B|B|C]|$9|1C|A|1D|B|C]]|D|@]|E|$]]|$1|S|3|-4|5|6|7|1E|8|@]|D|@]|E|$]]]|T|$]]

As somebody else mentioned, first you need <code>react-router</code> package. But <code>location</code> object that it provides you with contains parsed url.

But if you want full url badly without accessing global variables, I believe the fastest way to do that would be

<pre><code>...

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

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

 ...
</code></pre>

<code>href</code> is the one containing a full url.

For <code>memoize</code> I usually use <code>lodash</code>, it's implemented that way mostly to avoid creating new element without necessity.

P.S.: Of course is you're not restricted by ancient browsers you might want to try <code>new URL()</code> thing, but basically entire situation is more or less pointless, because you access global variable in one or another way. So why not to use <code>window.location.href</code> instead?

How do I get the full URL from within a ReactJS component?

I'm thinking it should be something like <code>this.props.location</code> but it is <code>undefined</code>

Read the current full URL with React?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

如何从ReactJS组件中获取完整的URL？我觉得应该像this.props.location，但它是undefined

问阅读当前的完整URL与反应？
EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问阅读当前的完整URL与反应？EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问阅读当前的完整URL与反应？
EN