Question

获取 React Router URL

2022-06-04

87

javascript reactjs react-hooks react-router

我正在尝试编写一个函数，将当前位置设置为刚刚单击的路线。但是，如您所见，它给出了我单击按钮时所在页面的网址，而不是按钮本身的路径页面。我应该用什么来代替 window.location.pathname ？

const setLocation = () => {
    console.log(window.location.pathname);
    setCurrentLocation(window.location.pathname);
  };

 <Link onClick={() => setLocation()} to="/today" className="btn btn-primary btn-sm">

    <Link onClick={() => setLocation()} to="/upcoming" className="btn btn-primary btn-sm">

Answer 1

为什么要将其存储到状态中？

ReactRouter 有一个钩子 useLocation https://v5.reactrouter.com/web/api/Hooks/uselocation ，您可以在其中获取任何推送路径的 .pathname 到历史记录。

如果您确实想自己存储位置，请将 to 中的路由值作为 setLocation 函数中的参数传递，或者创建一个包装 Link 组件并存储位置的组件：)

即：

<Link onClick={() => setLocation("/upcoming")} to="/upcoming" className="btn btn-primary btn-sm">

Answer 2

代码如下 ===>

onClick={
(e)=>console.log(e.target.href)
setLocation(e.target.href)
}
const setLocation = (path) => {
    console.log(window.location.pathname);
    setCurrentLocation(window.location.pathname+path);
  };