链接在React-router中没有href

Question

我在使用React-Router时遇到了一种非常奇怪的行为。以下是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>
    );
  }
}

在渲染时，我得到以下HTML，即没有href属性的锚标记。

  <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路由器的新手。任何帮助将不胜感激。谢谢是提前:)）

---- ----更新

以下是我的反应组件的外观（使用React Developer工具）：

我在这里做错了什么，但我无法得到。

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