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

这也发生在其他组件中。我知道我错过了一些东西，但我不知道它是什么。我/m 一个尝试 React 和 React Router 的新手。任何帮助将不胜感激。谢谢是提前:)

----更新----

这是我的 react 组件的样子（使用 React 开发者工具）：

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

更新 2

我正在遵循容器组件模式，我是否有可能以某种方式将路由文件写错了。虽然我不明白为什么当我传递静态数据时会出现问题。

有人可以指导我使用容器组件模式进行路由吗？

Answer 1

解决方案很简单，在您的to attribute in Link 中不要添加"#"。链接属性转换是这样的，它会自动将#/ 添加到锚链接。

用途：

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