Link component in navbar ul

[morenoh149]

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.

However I'd like to nest this anchor tag within an unordered list and list item - ul > li > a
And 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.

my code

  render: function() {
    var links = this.state.links;
    var val = links.map(function(link) {
        return (
          <li key={ link.path }>
            <Link to={ link.path }>{ link.name }</Link>
          </li>
        );
    });

    return (
      <nav className = 'nav'>
        <ul className = 'nav-pullRight'>
          { val }
        </ul>
      </nav>
    );

produces

<li data-reactid=".2g4alpp924g.0.0.$/">
  <a href="/" class="active" data-reactid=".2g4alpp924g.0.0.$/.0">home</a>
</li>
<li data-reactid=".2g4alpp924g.0.0.$#connect">
  <a href="#connect" target="_self" data-reactid=".2g4alpp924g.0.0.$#connect.0">connect</a>
</li>
<li data-reactid=".2g4alpp924g.0.0.$/blog">
  <a href="/blog" class="" data-reactid=".2g4alpp924g.0.0.$/blog.0">blog</a>
</li>

I'd like the first li to have a class of active as well.

could anyone advise on how to achieve my desired effect? I think navbars built around an unordered list is a common approach.

[ryanflorence]

I wish I could write a bot that identifies this question :P

Check out the State mixin, the example does exactly what you want: https://github.com/rackt/react-router/blob/master/docs/api/mixins/State.md

[morenoh149]

great that works! Is there any way to get a # part of the url?
I have /,/#foo and /blog routes. The hash one is useful because it gets the browser to scroll directly to that section. Does this information ever reach the backend? if so any way to get it from the State mixin?

[ryanflorence]

browsers don't send the hash part of a url to the server, no.