我如何从一个ReactJS组件中获得完整的URL ?
我认为它应该是这样的。props。location但它是未定义的
我如何从一个ReactJS组件中获得完整的URL ?
我认为它应该是这样的。props。location但它是未定义的
当前回答
你得到的是未定义的,因为你可能有React路由器之外的组件。
记住,你需要确保调用this.props.location的组件位于<Route />组件中,如下所示:
<Route path="/仪表盘"抱怨={仪表盘}/>
然后在Dashboard组件中,你可以访问this.props.location…
其他回答
你得到的是未定义的,因为你可能有React路由器之外的组件。
记住,你需要确保调用this.props.location的组件位于<Route />组件中,如下所示:
<Route path="/仪表盘"抱怨={仪表盘}/>
然后在Dashboard组件中,你可以访问this.props.location…
location是一个react-router特性,如果你想使用它,你必须安装它。
注意:不返回完整的url。
为了获得当前路由器实例或当前位置,你必须从react-router-dom中使用withRouter创建一个高级组件。否则,当你试图访问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)
正如其他人提到的,首先你需要一个反应路由器包。但它提供给你的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。
记住,我通常使用lodash,它的实现方式主要是为了避免不必要地创建新元素。
注:当然,你不受古老浏览器的限制,你可能想尝试新的URL()东西,但基本上整个情况或多或少是毫无意义的,因为你访问全局变量的一种或另一种方式。那么为什么不使用window.location.href呢?
只是在这个页面上添加一些进一步的文档-我已经与这个问题斗争了一段时间。
如上所述,获取URL的最简单方法是通过window.location.href。
然后,我们可以使用let urlElements = window.location.href.split('/')通过普通Javascript提取部分URL。
然后我们将console.log(urlElements)查看通过在URL上调用.split()生成的元素数组。
一旦找到想要访问数组中的哪个索引,就可以将其赋值给一个变量
let urlElelement = (urlElements[0])
现在你可以使用urlElement的值,它将是URL的特定部分,无论你想在哪里。