handle_active_tabs.js

// example url: http://localhost:3000/project/26/details

const StyledLink = styled(Link)`
  border: 2px solid green;
  ${props =>
    props.active &&
    css`
    border: 2px solid red;
  `}
`

class ProjectDetail extends React.Component {
  state = {
    activeTab: 'documents' // Set to show documents tab by default
  }
  handleLinkClick = e => {
    this.setState({
      activeTab: e.target.innerHTML.toLowerCase()
    })
  }
render() {
  <div>
    <StyledLink
      to={`/project/1/details`}
      active={activeTab === 'details'}
      onClick={this.handleLinkClick}>
      Details
    </StyledLink>
    <StyledLink
      to={`/project/2/documents`}
      active={activeTab === 'documents'}
      onClick={this.handleLinkClick}>
      Documents
    </StyledLink>
    <StyledLink
      to={`/project/3/discussion`}
      active={activeTab === 'discussion'}
      onClick={this.handleLinkClick}>
      Discussion
    </StyledLink>
  </div>
}

Great start! I would actually take a different approach though. Let's think through the flow for a second. You're wanting to be able to click a tab, navigate to that page and have the tab visually indicate that you are on that route. In this case, the route is your source of truth. Maintaining component state about the selected tab is actually redundant here. It also opens up the potential for edge cases where the URL and component state get out of sync. Let's allow the URL to remain our single source of truth and have the tabs respond to it as it changes. Luckily, react-router-dom already has a component that allows us to do that: <NavLink />. NavLink differs from Link in only one way: when one is currently on the route the link points to, the link will have a class name added to it signifying that it is "active". See an example HTML output from the 3Blades app using NavLink below:

<div>
  <a class="VerticalNavLink__VerticalNavLink-dLQMAE clDBUn active" href="/settings/profile">Profile</a>
  <a class="VerticalNavLink__VerticalNavLink-dLQMAE clDBUn" href="/settings/account">Account</a>
  <a class="VerticalNavLink__VerticalNavLink-dLQMAE clDBUn" href="/settings/billing">Billing</a>
  <a class="VerticalNavLink__VerticalNavLink-dLQMAE clDBUn" href="/settings/sshkeys">SSH Key</a>
  <a class="VerticalNavLink__VerticalNavLink-dLQMAE clDBUn" href="/settings/integrations">Integrations</a>
</div>

Notice how the first <a> tag has the class "active" applied? React-router applies that for us automatically. As far as using styled-components to style the NavLink, the component allows one to pass in one's own activeClassName prop, so your final code could look similar to the following:

const StyledLink = styled(NavLink).attrs({
  activeClassName: 'active',
})`
  border: 2px solid green;
  &[class~="active"] {
    border: 2px solid red;
  }
`

Does that all make sense? Do you have any questions about the code snippet above?

Wow yes that makes total sense. Throughout i was thinking there had to be a better solution because i felt like I could handle the work with the router/url instead of bringing in state. NavLink works perfectly in this scenario!

Just curious what value does .attrs({ activeClassName: 'active',}) bring?

Thanks again!

.attrs essentially lets you pre-set props. So .attrs({ activeClassName: 'active' }) is equivalent to calling the component like <StyledLink activeClassName="active" />. If you look at the docs for NavLink, activeClassName is a prop you can set to determine what class gets applied when the route is active. I'm using "active" as that class name (although, now that I re-read the documentation, I see that's also the default...oh well).

Gotcha! Makes sense. Thanks for your help!