Is use the adminlte template for react. (not the react version) I am struggle to get the sidebar right. The problem is I cannot get the a href right. See example
<li className="treeview">
<a href="#!">
<i className="fa fa-user" />
<span>Hoofdtrainer</span>
<span className="pull-right-container">
<i className="fa fa-angle-left pull-right" />
</span>
</a>
<ul className="treeview-menu">
<li>
<Link to="/admin/trainingen">
<i className="fa fa-book" />
<span>Trainersgroepen</span>
</Link>
</li>
<li>
<Link to="/admin/trainingen/cursisten">
<i className="fa fa-book" />
<span>Cursisten</span>
</Link>
</li>
Is there a way to active the treeview by the react-router? Or is er a way to change the href value
Related
I am trying to use the Header component of material design bootstrap in my React Application. And I pasted the below line of code from official website of Material design bootstrap to implement Header collapsible when screen size is small but it. Anyone have any idea what else need to do in order to make it work in react. I just paste it inside my react component. There is some kind of state I need to maintain here.
<header>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<div class="container-fluid">
<button
class="navbar-toggler"
type="button"
data-mdb-toggle="collapse"
data-mdb-target="#navbarExample01"
aria-controls="navbarExample01"
aria-expanded="false"
aria-label="Toggle navigation"
>
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarExample01">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item active">
<a class="nav-link" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar -->
<!-- Jumbotron -->
<div class="p-5 text-center bg-light">
<h1 class="mb-3">Heading</h1>
<h4 class="mb-3">Subheading</h4>
<a class="btn btn-primary" href="" role="button">Call to action</a>
</div>
<!-- Jumbotron -->
</header>
I have a side bar. It contains Menus. Each Menu has sub menus.
Home
Menu1 ->1.submenu1
->submenu2
Menu2 -> sub1
-> sub2
On selecting the Menu, it should be in active(color:blue). Under that menu1, If we select submenu1 then its color should also be changed. On navigating to submenu1, Sidebar's submenu should not be closed. It should be opened. I have tried with different solutions, but couldn't fix. Please help me to resolve this issue. Thanks in advance..
<aside className="main-sidebar sidebar-dark-primary elevation-4">
<div className="sidebar">
<nav>
<ul className="nav nav-pills nav-sidebar nav-child-indent flex-column" data-widget="treeview" role="menu" data-accordion="false">
<li className="nav-item">
<Link to="/home" className="nav-link active">
<i className="nav-icon fa fa-tachometer"></i>
<p>
Home
</p>
</Link>
</li>
<li className="nav-item has-treeview ">
<Link to="#" className="nav-link">
<i className="nav-icon fa fa-copy"></i>
<p>Menu1 <i className="fa fa-angle-left right"></i>
</p>
</Link>
<ul className="nav nav-treeview">
<li className="nav-item">
<Link to="/submenu1" className="nav-link">
<i className="fa fa-circle nav-icon"></i>
<p>Submenu1</p>
</a>
</li>
<li className="nav-item">
<Link to="/submenu2" className="nav-link">
<i className="fa fa-circle nav-icon"></i>
<p>Submenu2</p>
</a>
</li>
</ul>
</li>
<li className="nav-item has-treeview">
<Link to="#" className="nav-link">
<i className="nav-icon fa fa-book"></i>
<p>Menu2 <i className="fa fa-angle-left right"></i>
</p>
</Link>
<ul className="nav nav-treeview">
<li className="nav-item">
<Link to="/sub1" className="nav-link">
<i className="fa fa-circle nav-icon"></i>
<p>Sub1</p>
</Link>
</li>
<li className="nav-item">
<Link to="/sub2" className="nav-link">
<i className="fa fa-circle nav-icon"></i>
<p>Sub2</p>
</Link>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</aside>
In React js, there are two components to navigate to a route:
<NavLink> and <Link>.
<Link> provides accessible navigation to your react application.
<NavLink> provides styling attributes to the rendered element if matches to the URL alongwith navigation. Some of the styling attributes are activeClassName:String and activeStyle:Object.
Example of activeClassName attribute:
<NavLink to="/" exact activeClassName="selected">Home</NavLink>
<NavLink to="/about" activeClassName="selected">About</NavLink>
And in CSS,
.selected {
fontWeight: "bold",
color: "red"
}
Example of activeStyle:
<NavLink to="/" exact activeStyles={{fontWeight: "bold", color: "red"}}>
Home
</NavLink>
The NavLink of react router does not route to the appropriate page when the Navlink reside in the dropdown.
Below the Html struture tried to implement in React
<BrowserRouter>
<header className="menubar">
<nav className="navbar navbar-expand-sm">
<button className="navbar-toggler" data-toggle="collapse" data-target="#menu">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="menu">
<ul className="navbar-nav">
<li className="nav-item">
<div className="dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="loanlink">
<a href="#!" className="nav-link dropdown-toggle">
<span className="menuTitle">Loan</span>
</a>
<div className="dropdown-menu dropdown-menu-center" aria-labelledby="loanlink">
<div className="menuPointer"></div>
<NavLink className="dropdown-item" to="/loan">
<div className="menuContent">
<span className="menuTitle">Manage Loan</span>
</div>
</NavLink>
</div>
</div>
</li>
<li className="nav-item">
<NavLink className="nav-link dropdown-toggle" to="/revenue" >
<span className="menuTitle">Revenue</span>
</NavLink>
</li>
</ul>
</div>
</nav>
</header>
</BrowserRouter>
In the above code, the "revenue" link which is not dropdown-menu is working fine, but the links which are inside dropdown-menu is not working.
I think the dropdown toggle event prevents the react router navigation.
Am using React router and Bootstrap 4 (not reactstrap)
This is a late answer, but the problem is that Bootstrap's data-toggle for the Dropdown is preventing the route from working.
You can solve it by toggling the Dropdown using React state, instead of using the data-toggle behavior in Bootstrap.
<li className="nav-item">
<div className="dropdown" display="static" onClick={this.handleClick}>
<a href="#!" className="nav-link dropdown-toggle">
<span className="menuTitle">Loan</span>
</a>
<div className={this.state.showDD?'dropdown-menu show':'dropdown-menu'}>
<NavLink className="dropdown-item" to="/loan">
<span>Manage Loan</span>
</NavLink>
</div>
</div>
</li>
https://codeply.com/p/auvCgEmeiD
I need to add active class css on click tab, here is the code:
<ul>
<li className="step"><Link to={`${this.props.match.url}/personal-information`} >You <i className="fa fa-long-arrow-right"></i></Link></li>
<li className="step"><Link to={`${this.props.match.url}/content`}>Content <i className="fa fa-long-arrow-right"></i></Link></li>
<li className="step"><Link to={`${this.props.match.url}/profile-information`}>Profile <i className="fa fa-long-arrow-right"></i></Link></li>
<li className="step"><Link to={`${this.props.match.url}/rewards`}>Rewards <i className="fa fa-long-arrow-right"></i></Link></li>
<li className="step"><Link to={`${this.props.match.url}/goals`}>Goals <i className="fa fa-long-arrow-right"></i></Link></li>
<li className="step"><Link to={`${this.props.match.url}/thanks`}>Thanks <i className="fa fa-long-arrow-right"></i></Link></li>
<li className="step"><Link to={`${this.props.match.url}/payment`}>Payment <i className="fa fa-long-arrow-right"></i></Link></li>
<li className="step"><Link to={`${this.props.match.url}/launch`}>Launch! </Link></li>
</ul>
You can use NavLink, which is
"A special version of the that will add styling attributes to
the rendered element when it matches the current URL."
It has a property called activeClassName which handles the active link.
example :
<NavLink
to="/faq"
activeClassName="selected"
>FAQs</NavLink>
more info can be found in https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/NavLink.md
I don't get it react throws me this error: Expected corresponding JSX closing tag for <li> Because everything is closed well and it is only when I have multiple li elements
render() {
return (
<nav className="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
<ul className="nav sidebar-nav">
<li>
<a href="#" className="active">
<i className="fa fa-home"></i>Home
</a>
</li>
<li>
<a className="collapsible-header waves-effect arrow-r">
<i className="fa fa-user"></i> About me<i className="fa fa-angle-down rotate-icon"></i>
</a>
<li>
</ul>
</nav>
);
}
Can anybody help me out on this?
You are missing a slash in the second closing li:
<li>
<a className="collapsible-header waves-effect arrow-r">
<i className="fa fa-user"></i> About me<i className="fa fa-angle-down rotate-icon"></i>
</a>
</li>