Where do I set component views using the Navbar Navlink?

Hi there pcdavis,

As I was explaining in the other thread, the <NavLink> is merely a wrapper for React Router native NavLink component. To have the <NavLink>'s to prop to actually translate to a certain component, you need to specify the Route components somewhere. Be sure to check out this simple example.

With Best Regards,
Kuba

import React, { Component } from "react";
import { NavLink, Link } from "react-router-dom";

class NavBar extends Component {
  render() {
    return (
      <div>
        <nav className="navbar navbar-expand-lg navbar-light bg-light">
          <Link className="navbar-brand" to="/">
            Home
          </Link>
          <button
            className="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarNav"
            aria-controls="navbarNav"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span className="navbar-toggler-icon"></span>
          </button>
          <div className="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div className="navbar-nav">
              <NavLink className="nav-item nav-link" to="/CourseList">
                Course List
              </NavLink>
              <NavLink className="nav-item nav-link" to="/advisorInfoModal">
                Advisor Information
              </NavLink>
              <NavLink className="nav-item nav-link" to="/logout">
                Log Out
              </NavLink>
            </div>
          </div>
        </nav>
      </div>
    );
  }
}

export default NavBar;

How can I make the NavLink "Advisor Information" Open a Modal Component?

Hi @Joe101,

If I understand you correctly you want to fire modal after clicking on NavLink.

Then please put logic that triggers modal opening in componentDidMount of the component that is opened by NavLink.

Please tell me if my solution works.

Best, Kuba