Nein href mit Link in React-Router

Question

Ich habe ein sehr seltsames Verhalten mit React-Router. Es folgt der Code meiner Komponente in React:

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> 
    ); 
    } 
} 

Auf seiner Rendering, ich erhalte den folgenden HTML, das heißt, einen Anker-Tag ohne href Eigenschaft.

<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> 

Dies geschieht auch in anderen Komponenten. Ich weiß, dass ich etwas verpasse, aber ich habe keine Ahnung, was es ist. I/m ein Neuling versucht React und React Router. Jede Hilfe wird geschätzt. Dank ist Voraus :)

---- ---- aktualisieren

ist hier, welche Komponenten aussehen meine reagieren wie (unter Verwendung der Entwickler-Tools Reagieren):

I mache hier etwas falsch, aber was ich nicht bekommen kann.

Update 2

Ich folge den Container-Komponenten-Muster und könnte es möglich sein, dass ich die Strecke Datei irgendwie falsch ich schreibe. Obwohl ich nicht verstehen kann, warum es ein Problem wäre, wenn ich statische Daten übergebe.

Kann mir jemand mit Routing mit dem Container-Komponenten-Muster führen.

Answer 1

Die Lösung ist einfach in Ihrer to attribute in Lin k hinzufügen Sie nicht eine "#". Die Linkattributkonvertierung ist so, dass automatisch eine #/ zum Anker href hinzugefügt wird.

Verwendung:

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> 
    ); 
    } 
} 

Im Folgenden wird die Verknüpfung eines Beispiels Geige, wo ich diese Funktionalität getestet

JSFIDDLE