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>
}

Gotcha! Makes sense. Thanks for your help!