Active Component in Navbar and Menu Recoil

JavaScript
1

For the most part, I’m relatively happy with how it’s coming along. I’ve used React-BootStrap to replace BootStrap, JQuery, and Popper. The Navbar is responsive now. Below 990 pixels wide and the menu options convert to a hamburger menu in the upper right corner.

I’ve replaced the <Nav.Link/>s with <Link/>s because using the href= had a jarring white page while it reloads, whereas the to= retains state while loading a component. I tried adding the to attribute to a Nav.Link, but it didn’t seem to recognize it. I’m opening this issue to document 2 remaining concerns.

  • There is no distinction in the Navbar for the active component.
  • It feels like after picking a component from the menu, it should recoil automatically

live Demo fccTemplate
gitHub repo

NavBar.js

// rafc
// React Arrow Function Component
import React from 'react';
import PropTypes from 'prop-types';
import './NavBar.css';
import { Link } from "react-router-dom";
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
const NavBar = ({ icon, iconFCC, title }) => {
  return (
    <Navbar fixed="top" expand="lg" className='navbar bg-primary'>
      <Navbar.Brand href="https://github.com/TurtleWolfe/fccTempLate"
        target="_blank"
        rel="noopener noreferrer"
        title="TempLate Scaffolding for Free Code Camp Projects, with FontAwesome, React-Router & Analytics">
        <h2>
          <i className={iconFCC} /> {title} <i className={icon} />
        </h2>
      </Navbar.Brand>
      <Navbar.Toggle aria-controls="basic-navbar-nav" />
      <Navbar.Collapse id="basic-navbar-nav">
        <Nav className="mr-auto">
          {/* <Nav.Link href="/fccTempLate">Home</Nav.Link>
          <Nav.Link href="/quote">Link</Nav.Link>
          <Nav.Link href="/markdown">Home</Nav.Link>
          <Nav.Link href="/calculator">Link</Nav.Link>
          <Nav.Link href="/drum">Link</Nav.Link>
          <Nav.Link href="/pomodoro">Link</Nav.Link>
          <Nav.Link href="/about">Link</Nav.Link> */}
          <Link to='/fccTempLate'>Home</Link>
          <Link to='/quote'>quote</Link>
          <Link to='/markdown'>markdown</Link>
          <Link to='/calculator'>calculator</Link>
          <Link to='/drum'>drum</Link>
          <Link to='/pomodoro'>pomodoro</Link>
          <Link to='/about'>About</Link>
        </Nav>
      </Navbar.Collapse>
    </Navbar>
  );
};

NavBar.defaultProps = {
  title: 'fccTempLate',
  icon: 'fab fa-github',
  iconFCC: 'fab fa-free-code-camp'
};

NavBar.propTypes = {
  title: PropTypes.string.isRequired,
  icon: PropTypes.string.isRequired,
  iconFCC: PropTypes.string.isRequired
};

export default NavBar;

React-BootStrap NavBar
Screenshot from 2020-12-20 20-32-55

Screenshot_2020-12-21 fccTempLate
Screenshot_2020-12-21 fccTempLate450×634 41.7 KB

2

Final code along with links to the threads that helped me solve it, making sure the <Nav.Link as={Link} so it could still use the to= and it’s important not to leave out the href=, somehow that breaks the collapseOnSelect

ReactJS Bootstrap Navbar and Routing not working together

collapseOnSelect in react-bootstrap navbars with react-router-dom NavLinks

NavBar.js

// rafc
// React Arrow Function Component
import React from 'react';
import PropTypes from 'prop-types';
import './NavBar.css';
import { Link } from "react-router-dom";
import { Navbar, Nav } from 'react-bootstrap';
const NavBar = ({ icon, iconFCC, title }) => {
  return (
    <Navbar collapseOnSelect fixed="top" expand="lg" className='navbar bg-primary'>
      <Navbar.Brand href="https://github.com/TurtleWolfe/fccTempLate"
        target="_blank"
        rel="noopener noreferrer"
        title="TempLate Scaffolding for Free Code Camp Projects, with FontAwesome, React-Router & Analytics">
        <h2>
          <i className={iconFCC} /> {title} <i className={icon} />
        </h2>
      </Navbar.Brand>
      <Navbar.Toggle aria-controls="basic-navbar-nav" />
      <Navbar.Collapse id="basic-navbar-nav">
        <Nav collapseOnSelect className="mr-auto">
          <Nav.Link as={Link} to="/fccTempLate" href="/fccTempLate">Home</Nav.Link>
          <Nav.Link as={Link} to="/quote" href="/quote">Quote</Nav.Link>
          <Nav.Link as={Link} to="/markdown" href="/markdown">Markdown</Nav.Link>
          <Nav.Link as={Link} to="/calculator" href="/calculator">Calculator</Nav.Link>
          <Nav.Link as={Link} to="/drum" href="/drum">Drum</Nav.Link>
          <Nav.Link as={Link} to="/pomodoro" href="/pomodoro">Pomodoro</Nav.Link>
          <Nav.Link as={Link} to="/about" href="/about">About</Nav.Link>
        </Nav>
      </Navbar.Collapse>
    </Navbar>
  );
};

NavBar.defaultProps = {
  title: 'fccTempLate',
  icon: 'fab fa-github',
  iconFCC: 'fab fa-free-code-camp'
};

NavBar.propTypes = {
  title: PropTypes.string.isRequired,
  icon: PropTypes.string.isRequired,
  iconFCC: PropTypes.string.isRequired
};

export default NavBar;
2 Likes
3

Thanks for sharing that TurtleWolf1

2 Likes
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.