Collapsing the navbar when i click on link in react.js

Question

well as you can see this is an ordinary navbar code, what i'm trying to do is just when the user clicks on the any links/buttons inside the <Navbar.Collapse id="navbar"> it should collapse, Thanks in advance!

<Navbar bg="light" expand="md">
                <Container fluid>
                    <Navbar.Brand href="/">
                        <LOGO />
                    </Navbar.Brand>
                    <Navbar.Toggle aria-controls="navbar">
                        {/* <FaBars /> */}
                    </Navbar.Toggle>
                    <Navbar.Collapse id="navbar">
                        <Nav className="my-3 my-md-auto">
                            <NavLink
                                exact="true"
                                activeclassname="active"
                                to="/"
                                className="rounded-circle nav-link"
                            >
                                <FaHome />
                                <span className="rounded-pill d-md-none px-md-3 ms-2">
                                    Home
                                </span>
                            </NavLink>
                            <NavLink
                                exact="true"
                                activeclassname="active"
                                className="rounded-circle nav-link"
                                to="/Blog"
                            >
                                <FaBlog />
                                <span className="rounded-pill d-md-none px-md-3 ms-2">
                                    Blog
                                </span>
                            </NavLink>
                            <NavLink
                                exact="true"
                                activeclassname="active"
                                className="rounded-circle nav-link"
                                to="/Portfolio"
                            >
                                <FaFolder />
                                <span className="rounded-pill d-md-none px-md-3 ms-2">
                                    Portfolio
                                </span>
                            </NavLink>
                            <NavLink
                                exact="true"
                                activeclassname="active"
                                className="rounded-circle nav-link"
                                to="/About"
                            >
                                <FaExclamationCircle />
                                <span className="rounded-pill d-md-none px-md-3 ms-2">
                                    About
                                </span>
                            </NavLink>
                            <NavLink
                                exact="true"
                                activeclassname="active"
                                className="rounded-circle nav-link"
                                to="/Contact"
                            >
                                <FaEnvelope />
                                <span className="rounded-pill d-md-none px-md-3 ms-2">
                                    Contact
                                </span>
                            </NavLink>
                        </Nav>
                    </Navbar.Collapse>
                </Container>
            </Navbar>

score 0 · Answer 1 · answered Aug 27 '22 at 12:10

Listen to the router change event with the useLocation Hook from react-router-dom

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function SomeComponent() {
  const location = useLocation();

  useEffect(() => {
    console.log('Location changed');
    // change the navbar view state here
  }, [location]);

  //Rest of the code
}

Collapsing the navbar when i click on link in react.js

1 Answers1