How to focus a react-router Link

Question

I have an input box used for searching, and want to be able to press the down key to move focus from the input to the first of a list of <Link>s. It seems what I have here won't work, since <Link> isn't an actual DOM node. I am able to get it to work using <a> instead of <Link> though.

let Link = require('react-router').Link

let SearchAndSelect = React.createClass({
  handleKeyPress: function (e) {
    if (e.keyCode === 40) { //'down' key
      this.refs['searchBox'].blur()
      this.refs['link0'].focus()
    }
  },

  render: function () {
    let ids = ['1', '2' , '3']

    return (
      <div>
        <input onKeyDown={this.handleKeyPress} ref="searchBox"/>

        <div>
          {ids.map((id, key) => (
            <Link to={`thing/${id}`}
              ref={`link${key}`}>
              {id}
            </Link>        
          ))}
        </div>
      </div>
    )
  }
})

Is there a way to use focus() with a react-router <Link>?

Answer 1

If you use ReactDOM.findDOMNode(this.refs['link0']).focus() it should work.