如何使用反应路由器DOMv6的useLocation钩子

<div
  className={`alert alert-${showAlert?.color} alert-fixed fade ${
    showAlert ? "show" : "d-none"
  }`}
  role="alert"
  style={{
    width: "450px",
    right: "1%",
    top: "15%",
    bottom: "unset",
    left: "unset",
    transform: "unset",
  }}
>
  <div className="d-flex justify-content-between">
    <strong>{showAlert?.msg}!</strong>
    <button
      type="button"
      className="btn-close"
      onClick={() => setShowAlert(false)}
    ></button>
  </div>
</div>
2

首先你必须导入 useLocation 钩子

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

然后设置

const location = useLocation();

现在您可以使用具有以下属性的位置对象:键,路径名,搜索,哈希,状态

{
  key: 'ac3df4', // not with HashHistory!
  pathname: '/somewhere',
  search: '?some=search-string',
  hash: '#howdy',
  state: undefined
}

下面是另一个演示截图的位置对象是什么样子的:

console.log of 'location' object

0

您可以使用将 useLocation 挂钩导入您的项目

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

如果你想了解它,你可以使用这篇文章:

https://www.geeksforgeeks.org/react-router-hooks/

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(404)
打开MicrosoftOffice文件时缺少 api-ms-win-crt-runtime-l1-1-0.dll
上一篇
'时间倒退' xkcd
下一篇

相关推荐

发表评论

登录 后才能评论

评论列表(52条)