我如何从一个ReactJS组件中获得完整的URL ?
我认为它应该是这样的。props。location但它是未定义的
我如何从一个ReactJS组件中获得完整的URL ?
我认为它应该是这样的。props。location但它是未定义的
当前回答
如果你需要URL的完整路径,你可以使用Javascript:
window.location.href
要获得路径(减去域名),你可以使用:
window.location.pathname
console.log (window.location.pathname);//输出:"/js"(代码段运行的地方) console.log (window.location.href);/ /收益率:“https://stacksnippets.net/js”
来源:位置路径名属性- W3Schools
如果你还没有使用"react-router",你可以使用以下方法安装它:
纱线添加反应路由器
然后在React中。组件,你可以调用:
this.props.location.pathname
这将返回路径,不包括域名。
谢谢@abdulla-zulqarnain !
其他回答
你得到的是未定义的,因为你可能有React路由器之外的组件。
记住,你需要确保调用this.props.location的组件位于<Route />组件中,如下所示:
<Route path="/仪表盘"抱怨={仪表盘}/>
然后在Dashboard组件中,你可以访问this.props.location…
Window.location.href是你需要的。但是如果你正在使用react路由器,你可能会发现检查useLocation和useHistory钩子很有用。 这两种方法都创建了一个具有pathname属性的对象,你可以读取它,而且对很多其他事情都很有用。这是一个youtube视频,解释了react路由器钩子
两者都会给你你所需要的(没有域名):
import { useHistory ,useLocation } from 'react-router-dom';
const location = useLocation()
location.pathname
const history = useHistory()
history.location.pathname
正如其他人提到的,首先你需要一个反应路由器包。但它提供给你的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的完整路径,你可以使用Javascript:
window.location.href
要获得路径(减去域名),你可以使用:
window.location.pathname
console.log (window.location.pathname);//输出:"/js"(代码段运行的地方) console.log (window.location.href);/ /收益率:“https://stacksnippets.net/js”
来源:位置路径名属性- W3Schools
如果你还没有使用"react-router",你可以使用以下方法安装它:
纱线添加反应路由器
然后在React中。组件,你可以调用:
this.props.location.pathname
这将返回路径,不包括域名。
谢谢@abdulla-zulqarnain !
普通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