Ссылка по id in React JS

Question

Есть ли возможность создать хеш-ссылку в React JS?

А имеют, например что-то вроде этого:

<div className="nav"> 
    <Link to="">Home</Link> 
    <Link to="#services">Services</Link> 
    <Link to="#contact">Contact</Link> 
</div> 

И если пользователь нажимает на услуги, которые я хочу, что он идет в разделе страницы с идентификатором services.

Любые советы?

ОБНОВЛЕНИЕ

App коды компонента (основной компонент):

<div> 
    <Header route={this.props.location.pathname} 
      language={this.props.language.labels} 
      authenticated={this.props.authenticated} 
      signoutAction={this.props.actions} 
    /> 
    {React.cloneElement(this.props.children, { 
      currentLanguage: this.props.language.labels, 
      authenticated: this.props.authenticated 
    })} 
    <Footer currentLanguage={this.props.language.labels}/> 
</div> 

компонент заголовок:

<ul className="noPadding"> 
    <li style={{paddingTop: 20}}> <a href="">Home </a></li> 
    <li style={{paddingTop: 20}}> <a href="">Kenmerken </a></li> 
    <li style={{paddingTop: 20}}> <a href="">Voordelen </a></li> 
    <li style={{paddingTop: 20}}> <Link to="" onClick={this.handleScroll.bind(this, "whoAreWe")}>Wie zijn wij?</Link></li> 
    <li style={{paddingTop: 20}}> <a href="#contact">Contact </a></li> 
    <li style={{paddingTop: 20}}> <MainButton text="Aanmelden"/></li> 
</ul> 

Главный компонент:

render(){ 
    const languageHome = this.props.currentLanguage.default.homePage; 
    let loginBox = !this.props.authenticated ? (<div id="cta-1" className="onlyOnDesktop"><Login currentLanguage={languageHome}/></div>) : ""; 

    return (
     <div className="homeMain"> 
      <section className="marginOnXs" style={{width: '100%', padding: 0}}> 
       <MainSlider /> 
      </section> 

      <section className="why-us" style={{paddingTop: 0, paddingBottom: 0}}> 
       <Info currentLanguage={languageHome}/> 
      </section> 

      <div className="clearfix"></div> 

      <section className="benefits noPadding"> 
       <Benefits currentLanguage={languageHome} /> 
       <div className="clearfix"></div> 
      </section> 

      <section ref="whoAreWe" id="whoAreWe" className="whoAreWe noPadding"> 
       <WhoAreWe currentLanguage={languageHome} /> 
       <div className="clearfix"></div> 
      </section> 
     </div> 
    ); 
} 

Все разделы находятся в главном компоненте и Home компонент оказывает в

{React.cloneElement(this.props.children, { 
     currentLanguage: this.props.language.labels, 
     authenticated: this.props.authenticated 
})} 

Ручка функции прокрутки:

handleScroll(id, event){ 
    event.preventDefault(); 
    const item = ReactDOM.findDOMNode(this.refs[id]); 
    window.scrollTo(item.offsetTop); 
} 

То, что я вижу в консоли:

Answer 1

Я думаю, тем лучше путь создает простые ссылки html:

<div className="nav"> 
    <a href="">Home</a> 
    <a href="#services">Services</a> 
    <a href="#contact">Contact</a> 
</div> 

И использовать JQuery для гладкой прокрутки:

$('.nav a').on('click', function(event){ 
    event.preventDefault(); 

    $('html, body').animate({ 
     scrollTop: $($.attr(this, 'href')).offset().top 
    }, 500); 
}); 

Вы можете также ручка прокрутки в OnClick событие:

<div className="nav"> 
    <Link onClick={this.handleScroll.bind(this, 'home')}>Home</Link> 
    <Link onClick={this.handleScroll.bind(this, 'services')}>Services</Link> 
    <Link onClick={this.handleScroll.bind(this, 'contact')}>Contact</Link> 
</div> 

и функция:

handleScroll(id){ 
    $('html, body').animate({ 
     scrollTop: $('#' + id).offset().top 
    }, 500);   
} 

Если вы не хотите для использования jQuery вы можете добавить refs к компонентам (home, services etc) и установить scrollTop окна в позицию элемента.

Например:

handleScroll(id){ 
    const item = ReactDOM.findDOMNode(this.refs[id]); 
    window.scrollTo(item.offsetTop); 
}