Best way to add bootstrap active class to React Routes

Question

I have using react-router-dom the new version of React Routers..

Here is my code:

render() {
        return (
            <div>
                <nav className="navbar navbar-default">
                    <div className="container">
                        <div className="navbar-header">
                            <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                                <span className="sr-only">Toggle navigation</span>
                                <span className="icon-bar"></span>
                                <span className="icon-bar"></span>
                                <span className="icon-bar"></span>
                            </button>
                            <Link className="navbar-brand" to="/">React-Redux-ES6</Link>
                        </div>

                        <div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                            <ul className="nav navbar-nav navbar-right">
                                <li><Link to="/" className="links">Home</Link></li>
                                <li><Link to="/about" className="links">About</Link></li>
                            </ul>
                        </div>
                    </div>
                </nav>

                <h1 className="container">Learn React and Redux in ES6:</h1>
                <hr/>

                <Route exact path="/" component={Home}/>
                <Route exact path="/about" component={About}/>
            </div>
        );
    }

What I am trying to do:

I am trying to add active class to the list that I click on.

What I have tried:

I have tried to add onClick event but I think there is a much better way that I could just get the Current URL using React Routes and then add the active class to my list but I don't know how to do that!

Possible duplicate of [Active link with React-Router?](https://stackoverflow.com/questions/41131450/active-link-with-react-router) — The Reason, Jan 01 '18 at 22:24
@TheReason not duplicate because he just use `NavLink` for the `activeClassName` while this doesn't help me because I want to add the active class to the `
You have class `nav` on a wrapped `ul` element, so seems like it should be `NavLink` instead of `Link`. Why do you want to stay with `Link` instead of `NavLink`? — The Reason, Jan 01 '18 at 22:28
Why do you need the active class on the li? The li is just a container. If you style the link to fill the li, there would be no visual difference. I would also use `NavLink`. — Kyle Richardson, Jan 02 '18 at 00:41

Best way to add bootstrap active class to React Routes

0 Answers0