使用 React 阅读当前的完整 URL？

IT技术 reactjs
2021-04-22 08:01:00

如何从 ReactJS 组件中获取完整 URL？

我想它应该是这样的，this.props.location但它是undefined

6个回答

window.location.href 就是你要找的。

请注意，如果配置不正确，它可能会在服务器端出现问题。
2021-05-23 08:01:00
webpack 会抱怨“窗口未定义”
2021-06-07 08:01:00
它不工作。或请帮助我反应的结构。我使用了 const ddd = window.location.href; 控制台日志（ddd）；
2021-06-08 08:01:00
我需要 window.location 作为客户端的功能。所以我在组件的状态中设置位置 onMount 以避免在服务器端渲染时出现问题。
2021-06-10 08:01:00
@FranzSee 是的，服务器端代码中没有“窗口”，所以如果这是您的环境，您将需要使用诸如req.originalUrlexpress 之类的东西。支持 SSR 的各种反应路由库都有获取此信息的方法。
2021-06-15 08:01:00

如果您需要 URL 的完整路径，您可以使用 vanilla 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.Component 中，您可以调用：

this.props.location.pathname

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

谢谢@abdulla-zulqarnain！

你可以对路径名这样做 window.location.pathname
2021-06-13 08:01:00

this.props.location是一个 react-router 功能，如果你想使用它，你必须安装。

注意：不返回完整的 url。

注意：这不会返回完整的 url（主机名、协议等）
2021-06-12 08:01:00

window.location.href是你所需要的。但是，如果您正在使用React路由器，您可能会发现检查useLocation和useHistory钩子很有用。两者都创建了一个具有您可以读取的路径名属性的对象，并且对一堆其他东西很有用。这是一个解释react-router钩子的 YouTube 视频

两者都会给你你需要的东西（没有域名）：

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

const history = useHistory()
history.location.pathname
问题已经说“with React”，显然window.location.href不是React方式。
2021-06-10 08:01:00

你得到的undefined是因为你可能有 React Router 之外的组件。

请记住，您需要确保您调用this.props.location的<Route />组件位于这样的组件内：

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

然后在仪表板组件中，您可以访问this.props.location...

如果您的组件不在 a 内<Route />，则可以使用withRouter高阶组件。
2021-06-08 08:01:00
其它你可能感兴趣的问题
上一篇React.js 中的 Bootstrap 模式 下一篇在 JSX 中添加空格的最佳实践