ReactJs set active class for Route menu LINK tag

This is important to differentiate the active link from other links. Yes! it is possible in ReactJs with React Router Link. We have already discussed about React router in ReactJs Create Router Inside Another Router.

Consider the same Exapmle here. We have

ReactDOM.render((
        <Router>
            <Route path="/" component={TabLayout}>
                <IndexRedirect to="/tab1" />
                <Route path="tab1" component={tab1} />
                <Route path="tab2" component={tab2} />
                <Route path="tab3" component={tab3} />
            </Route>
        </Router>
), document.getElementById('myApp'));

Here we are configured the Route with their appropriate component. The main router component here is “TabLayout” and data attribute contains the menu array.

const menu = [
    { title: "Menu1", href: "#menu1" },
    { title: "Menu2", href: "#menu2" },
    { title: "Menu3", href: "#menu3" }
];

const TabLayout = React.createClass({
    displayName: "TabLayout",
    render: function () {
        return (
            <div>
                <ul>
                    {this.props.route.data.map(function (datas, index) {
                        return 	(
				<li key={datas.title}>
					<Link to={datas.href} activeClassName="active">{datas.title}</Link>
			       	</li>
				)
                        })}
                </ul>
            </div>
          )
    }
});

activeClassName” is find the active router and set the class name of “active“.

Leave a Reply

Your email address will not be published. Required fields are marked *