Active Routing Link in ReactJs

I tried to make the Nav link change its color when the page is active only. I found 'Home' is always active. All links are ok i.e when the page is active the link is active and change its color.

                        <Nav>
                            <Nav.Link><NavLink exact
                                style={({ isActive }) => { return { color: isActive ? '#ffd900' : '' } }}
                                className={this.state.navBarItem} to="/">HOME</NavLink></Nav.Link>


                            <Nav.Link><NavLink exact
                                style={({ isActive }) => { return { color: isActive ? '#ffd900' : '' } }}
                                className={this.state.navBarItem} to="/about">ABOUT</NavLink></Nav.Link>

                            <Nav.Link><NavLink exact
                                style={({ isActive }) => { return { color: isActive ? '#ffd900' : '' } }}
                                className={this.state.navBarItem} to="/service">SERVICE</NavLink></Nav.Link>

                            <Nav.Link><NavLink exact
                                style={({ isActive }) => { return { color: isActive ? '#ffd900' : '' } }}
                                className={this.state.navBarItem} to="/course">COURSES</NavLink></Nav.Link>

                            <Nav.Link><NavLink exact
                                style={({ isActive }) => { return { color: isActive ? '#ffd900' : '' } }}
                                className={this.state.navBarItem} to="/porfolio">PORTFOLIO</NavLink></Nav.Link>

                            <Nav.Link><NavLink exact
                                style={({ isActive }) => { return { color: isActive ? '#ffd900' : '' } }}
                                className={this.state.navBarItem} to="/contact">CONTACT US</NavLink></Nav.Link>
                        </Nav>

What can I do ?