I have a navbar and based on the url parameters I want to show different elements on that navbar such as user items, Edit settings etc. Right now I have a Connect to wallet
button and when the url has /wallet
in it i want to hide that button.
I tried using useParams()
from react-router-dom
but as a beginner how I can't figure it out where do I put conditions so that it shows or hides based on that Url parameters.
Here's my code
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;
I hope it works, try this
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>
//..
)
and add this to css
.hideThisButton { display: none; }
In React you can use useLocation()
from react-router-dom
to get the actual pathname
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 }
);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.