React-Routerでのhrefはありません

Question

React-Routerでは非常に奇妙な動作に直面しています。以下のリアクトの私のコンポーネントのコードです：

import React, { PropTypes } from 'react'; 
import {Router, Route, IndexRoute, Link} from 'react-router' 

export default class LinkWidget extends React.Component { 
render() 
    { 
    return (
     <li> 
      <Link className="page-scroll" to={"#" + this.props.path}>{this.props.name}</Link> 
     </li> 
    ); 
    } 
} 

そのレンダリングでは、私は、hrefのプロパティなしに次のHTML、すなわち、アンカータグを取得しています。

<ul class="nav navbar-nav navbar-left"> 
    <li class="hidden"> 
     <a href="#page-top"></a> 
    </li> 
    <li> 
     <a class="page-scroll">Services</a> 
    </li> 
    <li> 
     <a class="page-scroll">Portfolio</a> 
    </li> 
    <li> 
     <a class="page-scroll">About</a> 
    </li> 
    <li> 
     <a class="page-scroll">Team</a> 
    </li> 
    <li> 
     <a class="page-scroll">Contact</a> 
    </li> 
    </ul> 

これは他のコンポーネントでも同様に起こります。私は何かが欠落していることを知っているが、私はそれが何であるかの手がかりを持っていない。私はReactとReact Routerを試している初心者です。どんな助けもありがとう。おかげで、事前ある:)

----更新----

は、ここで部品は（リアクト開発者ツールを使用した）ように見える反応する私のものです：

私は私はここで何か間違っているが、私は得ることができない。

アップデート2

私は、コンテナコンポーネントパターンを以下だし、私が何とか間違ったルートファイルを書いている可能性がある可能性があります。私は静的データを渡しているときになぜそれが問題になるのか理解できません。

誰かがコンテナコンポーネントパターンを使用してルーティングをガイドできますか。

Answer 1

解決策はto attribute in Lin kで簡単です。"#"を追加しないでください。リンク属性変換は、アンカーhrefに自動的に​​を追加するようなものです。

使用：以下

import React, { PropTypes } from 'react'; 
import {Router, Route, IndexRoute, Link} from 'react-router' 

export default class LinkWidget extends React.Component { 
render() 
    { 
    return (
     <li> 
      <Link className="page-scroll" to={this.props.path}>{this.props.name}</Link> 
     </li> 
    ); 
    } 
} 

私は

JSFIDDLE