Topic: NavLink isnt responding

bfabian pro asked 6 years ago


import React, { Component } from "react";
import { BrowserRouter as Router } from "react-router-dom";
import { Navbar, NavbarNav, NavItem, NavLink, Fa, SideNav } from "mdbreact";
class UserNav extends Component {
  constructor(props) {
    super(props);
    this.state = {
      collapse: false,
      dropdownOpen: false,
      toggleStateA: false
    };
    this.onClick = this.onClick.bind(this);
    this.toggle = this.toggle.bind(this);
    this.handleToggleClickA = this.handleToggleClickA.bind(this);
  }
  // Slide out buttons event handlers
  handleToggleClickA() {
    this.setState({
      toggleStateA: !this.state.toggleStateA
    });
  }
  onClick() {
    this.setState({
      collapse: !this.state.collapse
    });
  }
  toggle() {
    this.setState({
      dropdownOpen: !this.state.dropdownOpen
    });
  }
  render() {
    const isOpenWithButtonA = this.state.toggleStateA;
    const navStyle = { backgroundColor: "black", color: "#fff" };
    const sideStyle = { backgroundColor: "black", width: "100%" };
    const button1 = (
      <div
        href="#!"
        onClick={this.handleToggleClickA}
        key="sideNavToggleA"
        style={{
          lineHeight: "32px",
          marginRight: "1em",
          verticalAlign: "middle"
        }}
      >
        <Fa icon="bars" color="white" size="2x" />
      </div>
    );
    const specialCaseNavbarStyles = {
      WebkitBoxOrient: "horizontal",
      flexDirection: "row"
    };
    return (
      <Router>
        <div className="mt-5">
          <SideNav
            triggerOpening={isOpenWithButtonA}
            breakWidth={1300}
            style={sideStyle}
            hidden
          >
            <li>
              <ul className="HTML-SURVEY">
                <li>
                  <a href="#!" style={{ color: "white" }}>
                    Test Your HTML SKills
                  </a>
                </li>
                <li>
                  <a href="#!" style={{ color: "white" }}>
                    Test Your CSS Skills
                  </a>
                </li>
                <li>
                  <a href="#!" style={{ color: "white" }}>
                    Test Your Javascript Skills
                  </a>
                </li>
              </ul>
            </li>
          </SideNav>
          <Navbar style={navStyle} dark expand="md" className="fixed-top">
            <NavbarNav left>
              <NavItem>{button1}</NavItem>
              <NavItem className="d-none d-md-inline" style={{ paddingTop: 5 }}>
                <strong>RoboSurvey</strong>
              </NavItem>
            </NavbarNav>
            <NavbarNav right style={specialCaseNavbarStyles}>
              <NavItem>
                <NavLink
                   to="/">
                  <Fa icon="home" className="d-inline-inline" />{" "}
                  <div className="d-none d-md-inline">Home</div>
                </NavLink>
              </NavItem>
              <NavItem>
                <NavLink
                  to="/login" >
                  <Fa icon="user" className="d-inline-inline" />{" "}
                  <div className="d-none d-md-inline">Logout</div>
                </NavLink>
              </NavItem>
            </NavbarNav>
          </Navbar>
        </div>
      </Router>
    );
  }
}
export default UserNav;

Jakub Mandra staff answered 6 years ago


Hello, What does it mean "isnt reposnding"? URL doesn't change on click? Router doesn't redirect? Please provide some more info. The code is working on my CRA app.   Regards

bfabian pro commented 6 years ago

URL doesn't change on click and Router doesn't redirect 


bfabian pro commented 6 years ago

The side bar "href" redirects the url when I link those but the "to" doesnt seem to redirect. I've created two CRA versions of this and still the same results. Could I make those navbar NavLinks into "a" tags? would that be an acceptable work around?


Jakub Mandra staff commented 6 years ago

Well it will work, but it can cause some unpredictable problems (its just the React thing).

Have you installed react-router-dom and managed the proper boilerplate for routing? 



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

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.7.1
  • Device: Dell Laptop
  • Browser: chrome
  • OS: windows
  • Provided sample code: Yes
  • Provided link: No