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
Related
i have an issue. I want the styling of my Link to change based on a state. But the issue is that, i have to click on the link twice before the styling is updated. But when i use the e.prevetndefault, the styling is applied when i click the link but I cannot go to the page. Here is the code.
function Footer(){
const [activeValue, setIsActive] = useState("0")
return(
<div className="footer">
<ul className="socials">
<li> <i className="fab fa-facebook-f"></i> </li>
<li> <i className="fab fa-instagram"></i> </li>
<li> <i className="fab fa-twitter"></i> </li>
<li> <i className="fas fa-podcast"></i> </li>
<li></li>
<li><Link to="/peepNews" onClick={()=>{setIsActive("1")}} style={activeValue=="1"?{color:"#0B77BE",fontWeight:"600"}:null} >Peep News</Link></li>
<li><Link to="/faq" onClick={()=>{setIsActive("2")}} style={activeValue=="2"?{color:"#0B77BE",fontWeight:"600"}:null} >FAQ</Link></li>
<li><a href="" style={{color:"gray", fontWeight:"200"}}>Careers</a></li>
<li><Link to="/legal" onClick={()=>{setIsActive("3")}} style={activeValue=="3"?{color:"#0B77BE",fontWeight:"600"}:null} >Legal</Link></li>
<li>Jupe Global </li>
</ul>
</div>
);
}
EDIT:
This is when i added the useEffect hook. But the issue is that whenever the page re-render, the activeValue is set back to the default Value(0) instead of 1,2,3 etc.
function Footer(){
const [activeValue, setIsActive] = useState("0")
useEffect(() => {
setIsActive(activeValue) ;
alert(activeValue);
},[activeValue])
return(
<div className="footer">
<ul className="socials">
<li> <i className="fab fa-facebook-f"></i> </li>
<li> <i className="fab fa-instagram"></i> </li>
<li> <i className="fab fa-twitter"></i> </li>
<li> <i className="fas fa-podcast"></i> </li>
<li></li>
<li><Link to="/peepNews" onClick={()=>{setIsActive("1")}} style={activeValue=="1"?{color:"#0B77BE",fontWeight:"600"}:null} >Peep News</Link></li>
<li><Link to="/faq" onClick={()=>{setIsActive("2")}} style={activeValue=="2"?{color:"#0B77BE",fontWeight:"600"}:null} >FAQ</Link></li>
<li><a href="" style={{color:"gray", fontWeight:"200"}}>Careers</a></li>
<li><Link to="/legal" onClick={()=>{setIsActive("3")}} style={activeValue=="3"?{color:"#0B77BE",fontWeight:"600"}:null} >Legal</Link></li>
<li>Jupe Global </li>
</ul>
</div>
);
}
With react-router you don't need to use the Link element to navigate to a new page, particularly if you want to functionality to be a little more complex.
You can create a history file and export a history object:
import { createBrowserHistory } from 'history';
export default createBrowserHistory();
Then import history into any file where you would like to navigate using javascript. Then in your file you can simply create a which you can style as you please (or continue to use with e.preventDefault()) which then navigates on the click action.
<li>
<div
onClick={() => {
setIsActive("1");
history.push("/peepNews");
}}
style={activeValue == "1" ? { color: "#0B77BE", fontWeight: "600" } : undefined} >
Peep News</div>
</li>
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>
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
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 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>