Reactjs 如何在react js中仅显示特定URL的div

如何使组件仅对某些URL可见。当用户单击链接时，我需要显示一个搜索框，我知道这可以通过使用事件侦听器来实现。但问题是，如果用户在通过按钮导航到的浏览器搜索栏中键入url，则搜索框不会显示

在用户页面上，必须显示搜索框，当用户单击或导航到新建时，必须隐藏搜索框

代码如下：

import React from "react";
import { Button } from "./Button";
import { Link } from "react-router-dom";
import { Form, FormControl } from "react-bootstrap";
import "./Navbar.css";
import "./Home.css";

function Home() {
  return (
    <div className="dashboard-btns">
      <div className="x">
        <Link to="/users" className="btn-mobile">
          <Button buttonStyle="btn--secondary">Users</Button>
        </Link>
        <Link to="/new" className="btn-mobile">
          <Button buttonStyle="btn--secondary">New</Button>
        </Link>

        <Form inline>
          <FormControl id="search" type="text" placeholder="users" />
          <Link to="/users" className="btn-mobile">
            <Button
              buttonStyle="btn--secondary"
              buttonSize="btn--small--search"
              type="submit"
            >
              Search
            </Button>
          </Link>
        </Form>
      </div>
     
    </div>
  );
}

export default Home;

从“React”导入React；
从“/Button”导入{Button}；
从“react router dom”导入{Link}；
从“react bootstrap”导入{Form，FormControl}；
导入“/Navbar.css”；
导入“/Home.css”；
函数Home（）{
返回(
使用者
新的
搜寻
);
}
导出默认主页；

---

仍在学习前端开发。非常感谢您的帮助

其中一种方法是您可以使用

位置

匹配路径并隐藏/显示路径。从

react router dom

导入

useLocation

。然后使用条件渲染

const location = useLocation();   
{location.pathname.includes("users") && <Button>...</Button>}

const location=useLocation（）；
{location.pathname.includes（“用户”）&&&……}