用React读取当前完整的URL ?

小开

最佳答案

window.location.href是你要找的。

小开

this.props.location是一个反应路由器特性，你必须安装，如果你想使用它。

注意:不返回完整的url。

小开

你会得到undefined，因为你可能在React Router之外有组件。

记住，你需要确保调用this.props.location的组件位于<Route />组件中，如下所示:

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

然后在Dashboard组件中，你可以访问this.props.location…

小开

如果你需要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中。组件，你可以调用:

this.props.location.pathname

这将返回路径，不包括域名。

谢谢@abdulla-zulqarnain !

小开

正如其他人提到的，首先你需要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，这样实现主要是为了避免不必要地创建新元素。

注:当然，你不受古老浏览器的限制，你可能想尝试new URL()之类的东西，但基本上整个情况或多或少是毫无意义的，因为你以一种或另一种方式访问全局变量。那么为什么不用window.location.href代替呢?

小开

为了得到当前路由器实例或当前位置，你必须用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。

然后，我们可以使用let urlElements = window.location.href.split('/')通过普通Javascript提取部分URL

然后我们将console.log(urlElements)来查看在URL上调用.split()生成的元素数组。

一旦找到想要访问数组中的哪个索引，就可以将其赋值给一个变量

let urlElelement = (urlElements[0])

现在你可以使用urlElement的值，它将是URL的特定部分，无论你想在哪里。

小开

window.location.href是你需要的。但是如果你正在使用react路由器，你可能会发现检查useLocation和useHistory钩子很有用。这两种方法都创建了一个具有pathname属性的对象，你可以读取它，而且对很多其他事情都很有用。这是一个youtube视频，解释了react路由器钩子 < / p >

两者都会给你你所需要的(没有域名):

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


const history = useHistory()
history.location.pathname

小开

读这篇文章，我找到了React / NextJs的解决方案。因为如果我们直接在react或nextjs中使用window.location.href，它会抛出错误

< p >服务器错误 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>
);
};

< em > 注意: https://medium.com/frontend-digest/why-is-window-not-defined-in-nextjs-44daf7b4604e#:~:text=NextJS%20is%20a%20framework%20that,is%20not%20run%20in%20NodeJS . < / p >

小开

普通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