Where do I set component views using the Navbar Navlink?


Topic: Where do I set component views using the Navbar Navlink?

pcdavis pro asked 7 years ago

I have a single page app and trying to use Navbar NavLink to show different components based on the Route Path. How do I specify which component to render based on the different route that gets used?

Jakub Strebeyko staff answered 7 years ago

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


Joe101 answered 5 years ago

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?


Jakub Chmura staff premium answered 5 years ago

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


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB React
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No