reactjs react router获取完整的当前路径名

sxpgvts3  于 12个月前  发布在  React
关注(0)|答案(8)|浏览(111)

有没有一个简单的方法来返回当前的路由器地址。
IE,如果我在页面上,我只是想看看我是根据React路由器上的页面.
因此,localhost/admin/users将返回admin/users
显然,我可以通过解析位置得到相同的结果,但我想知道react router是否提供了一种简单的机制来实现这一点,就像它提供params props一样?

3lxsmp7m

3lxsmp7m1#

如果你使用的是1.0或更高版本,你会在你的React组件中使用location作为一个prop,它会与一个路由匹配。

this.props.location.pathname

字符串
得到你想要的

ar7v8xwq

ar7v8xwq2#

this.props.location.pathname仅给出路由路径。
window.location.href为您提供完整的URL,如下所示https://stackoverflow.com/a/39823749/7560899

3j86kqsm

3j86kqsm3#

对于React功能组件

import { useLocation } from 'react-router-dom';

const MyComponent = () => {
  let location = useLocation();
  ...useState

    useEffect(() => {
    console.log(location.pathname);
  }, []);

  return ();

  };

  export default MyComponent;

字符串
还有很多其他选项:https://dev.to/finallynero/hooks-introduced-in-react-router-v5-1-7g8

ippsafx7

ippsafx74#

你也可以尝试

location.pathname

字符串
它可能会工作,而其他方法不像它对我做的那样

ukdjmx9f

ukdjmx9f5#

对于使用浏览器窗口对象的非React,纯基于JavaScript的解决方案。假设当前页面的URL是这样的https://hostname:port/path?query

window.location.href // returns the full URL 'https://hostname:port/path?query'
window.location.pathname // returns just the 'path' part of the full URL.
window.location.search // returns just the '?query' part of the full URL.
window.location.port // returns the 'port'.
window.location.hostname // returns just the 'hostname' part of the URL.
window.location.host // returns the hostname and port (hostname:port) part of the URL.
window.location.protocol // returns the protocol (https)
window.location.origin // returns the base URL (https://hostname:port)

请参阅https://developer.mozilla.org/en-US/docs/Web/API/Location了解更多详细信息。

mklgxw1f

mklgxw1f6#

对于react-router-dom v6

const { pathname } = useLocation();

字符串
如果有人需要,请导入

import { useLocation } from "react-router-dom";

fcwjkofz

fcwjkofz7#

window.location将给予完整路径。
this.props.location.pathname-它可能不会给予完整的路径。如果你只想要没有域名前缀的URL路径,使用这个。(另外,我可能建议使用上下文API在任何子组件中获取这个,而不是将其作为props传递)
再举一个例子,要实现具有社交共享功能的新组件,您可能需要使用window.location而不是location.pathname

jmp7cifd

jmp7cifd8#

如果你想要不带/的路径名,那么使用它

window.location.pathname.split('/')[1]

相关问题