Listing 12-3: Using the exact attribute on NavLink components

Previous Listing | Next Listing


            <ul>
          <li><NavLink exact to="/" activeClassName="active">Home</NavLink></li>
          <li><NavLink exact to="/aboutUs" activeStyle={{color:'green'}}>About Us</NavLink>
            <ul>
              <li><NavLink exact to="/aboutUs/team" activeClassName="active">Meet the Team</NavLink></li>
              <li><NavLink exact to="/aboutUs/history" activeClassName="active">Company History</NavLink></li>
            </ul>
          </li>
          <li><NavLink exact to="/contactUs" activeClassName="active">Contact Us</NavLink></li>
        </ul>

Download the examples, report issues, and ask/answer questions in the discussion area by visiting the book's github page. All of the code for the book is also available on codesandbox.io for you to play around with.

ReactJS Foundations is published by John Wiley and Sons, Inc and is available in paperback and eBook.

Latest Blog Posts

React Router v6 Code Posted

Chapter 12 covers how to do Routing in React using React Router v5. In the time since the book came out, React Router v6 has been released, which includes some changes to how it’s used. I’m also working on writing a version of Chapter 12 that covers React Router 6. I’ll post that to the […]

Errata: Chapter 6

The final code example in the Shallow Copies and the Spread Operator section on page 160 shows a rest parameter with only two periods. There should be three. The correct code is:

React 18 Update

The biggest change in React 18 is the addition of concurrent rendering. With concurrent rendering, you can mark state updates as non-urgent in order to improve the performance of your user interface. Concurrent rendering is opt-in. What this means is that it’s only enabled when you use a concurrent feature. As a result, apps built […]