Question

我正在尝试从react.js项目中获取路由的ID，例如：page1#view-all

我尝试使用本机JavaScript document和window，但不幸的是，由于SSR，我无法采用这种方式。

上述功能还有其他选择吗？如何获得带有href ID的路由器链接？ page1#view-all

谢谢

仅供参考，使用document或window时遇到的错误是我未定义任何错误。

这是一个代码段：

<Link
                to="/page1#view-all"
                className={`subItem-anchor
                ${
                  route && route.split("/")[route.split("/").length - 1] === "all-projects"
                    ? "subnavitemHighlightd"
                    : ""
                }`}
              >

route实际上是其他路由，例如page1/another-sub-page，但我无法获得page1#view-all

Answer 1

使用react-router-dom

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

并像这样访问

  let location = useLocation()
  console.log(location);

useLocation挂钩返回包含pathname，search，hash，key和当前位置的状态属性的位置对象。 / p>

要访问的示例代码

function App(){

let location = useLocation()
return(
<h3>Access from useLocation</h3>
)}

或者如果它是基于类的组件，则可以像这样访问而不导入任何东西

let urlData = this.props.location;
console.log(urlData);

Answer 2

找到了解决方法，我做了什么

render() {
  { ssr } = this.props

  if (ssr) return
  const urlId = window.location.toString().split("#")[1]

  return(
    <div>URL ID: {urlId}</div>
  )
}

如何从反应路线获取href ID？

2 个答案: