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

pcdavis pro asked 6 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 Chmura staff answered 4 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

Joe101 free answered 4 years ago

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

class NavBar extends Component {
  render() {
    return (
        <nav className="navbar navbar-expand-lg navbar-light bg-light">
          <Link className="navbar-brand" to="/">
            aria-label="Toggle navigation"
            <span className="navbar-toggler-icon"></span>
          <div className="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div className="navbar-nav">
              <NavLink className="nav-item nav-link" to="/CourseList">
                Course List
              <NavLink className="nav-item nav-link" to="/advisorInfoModal">
                Advisor Information
              <NavLink className="nav-item nav-link" to="/logout">
                Log Out

export default NavBar;

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

Jakub Strebeyko staff answered 6 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,

Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB React
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No