CODEWITHSUNDEEP
javascriptreactjs
eatmailyo
eatmailyo

Reputation: 670

React - Add Active class to list item react-router

Im learning now the ReactJS and I read a lot of topics about this article, but I can't find a right solution for my problem.

I want to add a active class to li item not a, like

<li class="active"><a href="">Item</a></li>

not

<li><a href="" class="active">Item</a></li>

This is my reactJS code

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link, Redirect, Switch } from "react-router-dom";

const Content = () => (
  <Router>
    <div className="content">
        <div className="navigation">
            <ul>
                <li>
                    <Link to="/app">Wallets</Link>
                </li>
                <li>
                    <Link to="/backup">Backup</Link>
                </li>
                <li>
                    <Link to="/keys">Private keys</Link>
                </li>
                <li>
                    <Link to="/security">Security</Link>
                </li>
                <li>
                    <a href="/" target="_blank">How it works</a>
                </li>
            </ul>
        </div>

        <div className="wrapper">
            <Switch>
                <Route path="/app" component={App} />
                <Route path="/backup" component={Backup} />
                <Route path="/keys" component={Keys} />
                <Route path="/security" component={Security} />
                <Redirect to="/app" />
            </Switch>
        </div>
    </div>
  </Router>
);

...

export default Content;

Upvotes: 0

Views: 1409

Answers (2)

Sergio Escudero
Sergio Escudero

Reputation: 1894

You can use NavLink, it has a property for the active Links:

import { NavLink } from 'react-router-dom';

After:

<ul>
 <li>
  <NavLink to="YOUR_ROUTE" exact activeClassName="link-active">
   { YOUR_CONTENT }
  </NavLink>
 </li>
</ul>

Now your links which are actives will have link-active class name.

Upvotes: 1

Remi Prasanna
Remi Prasanna

Reputation: 51

activeClassName The className a receives when its route is active. No active class by default.

https://knowbody.github.io/react-router-docs/api/Link.html

Upvotes: 0

Related Questions