我如何从一个ReactJS组件中获得完整的URL ?

我认为它应该是这样的。props。location但它是未定义的


当前回答

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

其他回答

Window.location.href是你要找的。

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

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

服务器错误 ReferenceError:没有定义window

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>
  );
};

注意: https://medium.com/frontend-digest/why-is-window-not-defined-in-nextjs-44daf7b4604e: ~:文本= NextJS % 20 % 20 % 20框架% 20,% 20不是% 20在% 20 nodejs运行% 20。

location是一个react-router特性,如果你想使用它,你必须安装它。

注意:不返回完整的url。

你得到的是未定义的,因为你可能有React路由器之外的组件。

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

<Route path="/仪表盘"抱怨={仪表盘}/>

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