{"action":"closed","issue":{"url":"https://api.github.com/repos/rackt/react-router/issues/760","labels_url":"https://api.github.com/repos/rackt/react-router/issues/760/labels{/name}","comments_url":"https://api.github.com/repos/rackt/react-router/issues/760/comments","events_url":"https://api.github.com/repos/rackt/react-router/issues/760/events","html_url":"https://github.com/rackt/react-router/issues/760","id":56308095,"number":760,"title":"Link component in navbar ul","user":{"login":"morenoh149","id":587438,"avatar_url":"https://avatars.githubusercontent.com/u/587438?v=3","gravatar_id":"","url":"https://api.github.com/users/morenoh149","html_url":"https://github.com/morenoh149","followers_url":"https://api.github.com/users/morenoh149/followers","following_url":"https://api.github.com/users/morenoh149/following{/other_user}","gists_url":"https://api.github.com/users/morenoh149/gists{/gist_id}","starred_url":"https://api.github.com/users/morenoh149/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/morenoh149/subscriptions","organizations_url":"https://api.github.com/users/morenoh149/orgs","repos_url":"https://api.github.com/users/morenoh149/repos","events_url":"https://api.github.com/users/morenoh149/events{/privacy}","received_events_url":"https://api.github.com/users/morenoh149/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2015-02-02T23:07:29Z","updated_at":"2015-02-03T03:38:01Z","closed_at":"2015-02-03T03:38:01Z","body":"I'm using the Link component to populate the links in my site's navbar. It's great that the react-router link component automatically gives the appropriate link the class `active`.\r\n\r\nHowever I'd like to nest this anchor tag within an unordered list and list item - `ul > li > a`\r\nAnd then style the `li` when the anchor is `a.active` to let the user know where they are in the site. Sadly CSS has no parent selector, so the alternative is to do some hacky javascript to set the `li` that's a parent of the `a.active` link.\r\n\r\nmy code\r\n```jsx\r\n  render: function() {\r\n    var links = this.state.links;\r\n    var val = links.map(function(link) {\r\n        return (\r\n          <li key={ link.path }>\r\n            <Link to={ link.path }>{ link.name }</Link>\r\n          </li>\r\n        );\r\n    });\r\n\r\n    return (\r\n      <nav className = 'nav'>\r\n        <ul className = 'nav-pullRight'>\r\n          { val }\r\n        </ul>\r\n      </nav>\r\n    );\r\n```\r\nproduces\r\n```html\r\n<li data-reactid=\".2g4alpp924g.0.0.$/\">\r\n  <a href=\"/\" class=\"active\" data-reactid=\".2g4alpp924g.0.0.$/.0\">home</a>\r\n</li>\r\n<li data-reactid=\".2g4alpp924g.0.0.$#connect\">\r\n  <a href=\"#connect\" target=\"_self\" data-reactid=\".2g4alpp924g.0.0.$#connect.0\">connect</a>\r\n</li>\r\n<li data-reactid=\".2g4alpp924g.0.0.$/blog\">\r\n  <a href=\"/blog\" class=\"\" data-reactid=\".2g4alpp924g.0.0.$/blog.0\">blog</a>\r\n</li>\r\n```\r\nI'd like the first `li` to have a class of `active` as well.\r\n\r\ncould anyone advise on how to achieve my desired effect? I think navbars built around an unordered list is a common approach."}}