React Router active Class for home page

Asked
Active3 hr before
Viewed126 times

9 Answers

classrouterreact
90%

On the Link component you can now add activeClassName or set activeStyle.,These allow you to easily add styles to the currently active link.,The NavLink will add your custom styling attributes to the rendered element based on the current URL.

In a file called nav_link.js

import React from 'react';
import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';

class NavLink extends React.Component {
    render() {
        var isActive = this.context.router.route.location.pathname === this.props.to;
        var className = isActive ? 'active' : '';

        return(
            <Link className={className} {...this.props}>
                {this.props.children}
            </Link>
        );
    }
}

NavLink.contextTypes = {
    router: PropTypes.object
};

export default NavLink;

And use it as given below in your component:

...
import NavLink from "./nav_link";
.....

<nav>
   <ul className="nav nav-pills pull-right">
      <NavLink to="/">
         <i className="glyphicon glyphicon-home"></i> <span>Home</span>
      </NavLink>
      <NavLink to="about">
         <i className="glyphicon glyphicon-camera"></i> <span>About</span>
      </NavLink>
   </ul>
</nav>
load more v
88%

Active class is required if you want to highlight the page name in the header on the current page. There are two ways we can use to add active className to the link. In this tutorial, I’ll show you all the different ways you can use to do that. So let us get started.,The above code will help you adding active className to any HTML tag. I have used this to add in li tag but you can add it anywhere.,Note: we have to add exact props to the nav link with the home route else it will keep the route of the homepage always active.

You also need to add the below CSS code in your header.css file.

.active a {
   background - color: red;
   color: #fff;
}
72%

Pretag
 Pretag team - issue, fix, solve, resolve
65%

Pretag
 Pretag team - issue, fix, solve, resolve
75%

check the isActive prop and "checkActive" is a function.,You have to use isActive={} to add additional verification to ensure whether the link is active.,Another config you can use is "exact" but It is not possible to demonstrate it in a jsFiddle. I think the code would be like

Example in jsfiddle

<li><NavLink to="/" isActive={checkActive}>Home</NavLink></li>
load more v
40%

For example, if you have a router that looks like this:,This is just a small tip regarding react-router: if your Links are in a component other than a component listed in your router, then their activeClassName property won't work properly. The active class will be assigned when you initially load the page, but clicking links won't change the active link. ,Then any Links in the Navbar component won't be assigned active classes properly.

For example, if you have a router that looks like this:

ReactDOM.render(
  <Provider store={store}>
    <Router history={browserHistory}>
      <Route path="/" component={Main}>
        <IndexRoute component={Home}/>
        <Route path="login" component={Login}/>
        <Route path="signup" component={Signup}/>
      </Route>
    </Router>
  </Provider>,
  document.getElementById('app')
);
load more v
22%

It is used to style the active routes so that user knows on which page he or she is currently browsing on the website.,The Link component is used to navigate the different routes on the site. But NavLink is used to add the style attributes to the active routes.,In our routing app, we have three routes which are [home, /users, /contact] Let’s style them using NavLink.

.active {
   color: red;
}
load more v
60%

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.,If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.,Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

Pretag
 Pretag team - issue, fix, solve, resolve
48%

To specify which route to navigate to, use the to prop and pass the path name. The activeClassName prop will add an active class to the link if it's currently active.,The NavLink component provides a declarative way to navigate around the application. It is similar to the Link component, except it can apply an active style to the link if it is active. ,If you notice here, I've added a Login button. We will come back to the Navbar component again when we discuss protected routes later on in the guide.

Pretag
 Pretag team - issue, fix, solve, resolve

Other "class-router" queries related to "React Router active Class for home page"