在 react.js 中根据 url 参数显示或隐藏元素

Question

我有一个导航栏，根据 url 参数，我想在该导航栏上显示不同的元素，例如用户项目、编辑设置等。现在我有一个“ Connect to wallet按钮，当 url 中有/wallet时，我想隐藏那个按钮。

我尝试使用react-router-dom useParams()但作为初学者，我无法弄清楚我在哪里放置条件以便它根据该 Url 参数显示或隐藏。

这是我的代码

import React, { useState } from "react";
import { Nav, Navbar, Button, Modal, Form } from "react-bootstrap";
import { Link } from "react-router-dom";

function NavbarTop() {
  const [showLogin, setShowLogin] = useState(false);
  const [showSignup, setShowSignup] = useState(false);

  //handler for login
  const handleCloseLogin = () => setShowLogin(false);
  const handleShowLogin = () => setShowLogin(true);

  //handler for signup
  const handleCloseSignup = () => setShowSignup(false);
  const handleShowSignup = () => setShowSignup(true);
  
  return (
    <Navbar className="navBar" variant="dark" expand="lg" sticky="top">
      <Navbar.Brand>
        <Link to="/">
          <img src="images/logo.png" alt="playtoshi" className="logo" />
        </Link>
      </Navbar.Brand>
      <Navbar.Toggle aria-controls="basic-navbar-nav" />
      <Navbar.Collapse id="basic-navbar-nav">
        <Nav className="ml-auto mr-md-3">
          <Nav.Link href="#home">MARKETPLACE</Nav.Link>
          <Nav.Link href="#link">COMMUNITY</Nav.Link>
          <Nav.Link href="#link" className="mr-md-2">
            HELP
          </Nav.Link>

//I want to hide this button if the url has /wallet in it

          <Link to="/wallet">
            <Button variant="outline-warning">Connect your wallet</Button>{" "}
          </Link>
        </Nav>
        <Button
          variant="outline-primary"
          className="mr-sm-2"
          onClick={handleShowLogin}
        >
          Login
        </Button>{" "}
        <Button variant="outline-success" onClick={handleShowSignup}>
          Sign Up
        </Button>{" "}
      </Navbar.Collapse>

      {/* Login Modal */}
      <Modal show={showLogin} onHide={handleCloseLogin} animation={false}>
        <Modal.Header closeButton>
          <Modal.Title>Login</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <Form>
            <Form.Group controlId="formBasicEmail">
              <Form.Label>Email address</Form.Label>
              <Form.Control type="email" placeholder="Enter email" required />
              <Form.Text className="text-muted">
                We'll never share your email with anyone else.
              </Form.Text>
            </Form.Group>

            <Form.Group controlId="formBasicPassword">
              <Form.Label>Password</Form.Label>
              <Form.Control type="password" placeholder="Password" required />
            </Form.Group>
            <Form.Group controlId="formBasicCheckbox">
              <Form.Check type="checkbox" label="Check me out" />
            </Form.Group>
            <Button variant="primary" type="submit">
              Submit
            </Button>
          </Form>
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleCloseLogin}>
            Close
          </Button>
        </Modal.Footer>
      </Modal>

      {/* Signup modal */}
      <Modal show={showSignup} onHide={handleCloseSignup} animation={false}>
        <Modal.Header closeButton>
          <Modal.Title>Signup</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <Form>
            <Form.Group>
              <Form.Label>Enter Your Name</Form.Label>
              <Form.Control
                type="text"
                placeholder="First Name"
                required
                className="mb-sm-2"
              />
              <Form.Control type="text" placeholder="Last Name" required />
            </Form.Group>

            <Form.Group controlId="formBasicEmail">
              <Form.Label>Email address</Form.Label>
              <Form.Control type="email" placeholder="Enter email" required />
              <Form.Text className="text-muted">
                We'll never share your email with anyone else.
              </Form.Text>
            </Form.Group>

            <Form.Group controlId="formBasicPassword">
              <Form.Label>Password</Form.Label>
              <Form.Control type="password" placeholder="Password" required />
            </Form.Group>

            <Form.Group controlId="formBasicPassword">
              <Form.Label>Password</Form.Label>
              <Form.Control
                type="password"
                placeholder="Retype Password"
                required
              />
            </Form.Group>

            <Form.Group controlId="formBasicCheckbox">
              <Form.Check
                type="checkbox"
                label="I Agree the terms and conditions"
              />
            </Form.Group>
            <Button variant="primary" type="submit">
              Submit
            </Button>
          </Form>
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleCloseSignup}>
            Close
          </Button>
        </Modal.Footer>
      </Modal>
    </Navbar>
  );
  
}

export default NavbarTop;

Answer 1

我希望它有效，试试这个

const currentPath = this.props.location.pathname
const walletPath = '/wallet'
const className = currentPath === walletPath ? 'hideThisButton' : '';
/* if you want to check that current path includes the wallet path try 
 * "currentPath.includes(walletPath)"
 * instead of "currentPath === walletPath"
 */
return (
    //...
    <Link to="/wallet">
        <Button className={className} variant="outline-warning">Connect your wallet</Button>{" "}
    </Link>
    //..
)

并将其添加到 css

.hideThisButton { display: none; }

Answer 2

在 React 中，您可以使用react-router-dom useLocation()来获取实际路径名

import { useLocation } from 'react-router-dom';
const walletPath = '/wallet'
const [hide, setHide] = useState(useLocation().pathname === walletPath ? true : false);

return (
  //....
  { !hide ? ( 
    <Link to = "/wallet" >
      <Button variant = "outline-warning" > Connect your wallet </Button>
    </Link>
  ) : null }
);