ruby-on-rails-4 - 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 属性的 anchor 标记。

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

----更新----

这是我的 React 组件的样子(使用 React Developer 工具):

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

更新 2

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

谁能指导我使用容器组件模式进行路由。

Answer 1

解决方法很简单，在你的 to 属性中的 Link 不要添加 “#”。链接属性转换是这样的，它会自动将 #/ 添加到 anchor 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>
    );
  }
}

下面是我测试此功能的示例 fiddle 的链接

JSFIDDLE