[Solved]-React — have active item state stay with menu component when loaded into new page-Reactjs

For your current setup, just pass in an active prop to your header from each component:

const Dashboard = React.createClass({
  render() {
    return <div>
      <Nav active="dashboard" />
    </div>
  }
})

const About = React.createClass({
  render() {
    return <div>
      <Nav active="about" />
    </div>

  }
})

const Messages = React.createClass({
  render() {
    return <div>
      <Nav active="messages" />
      // other stuff
    </div>
  }
})

const Nav = React.createClass({
  isActive(value){
    return 'nav-link '+((value===this.props.active) ?'active':'');
  },
  render() {
    return <div>
      <Link className={this.isActive("settings")}>Settings</Link>
      <Link className={this.isActive("dashboard")}>Dashboard</Link>
    </div>
  }
})



render((
  <Router>
    <Route path="/" component={App}>
      <IndexRoute component={Dashboard} />
      <Route path="about" component={About} />
      <Route path="inbox" component={Inbox}>
        <Route path="messages/:id" component={Messages} />
      </Route>
    </Route>
  </Router>
), document.body)