沒有href鏈接在反應路由器

我面對一個非常奇怪的行爲與React路由器。以下是我在組件的代碼陣營：沒有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> 
    ); 
    } 
}

在它的渲染，我得到了下面的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 Router的新手。任何幫助將不勝感激。由於是提前:)

---- ----更新

這裏是我的反應成分的樣子（使用陣營開發人員工具）：

我在這裏做錯了什麼，但我無法得到。

更新2

我正在關注的容器組件模式，可能沒有可能，我是寫莫名其妙的路徑文件錯誤。雖然我不明白爲什麼當我傳遞靜態數據時會出現問題。

有人可以指導我使用容器組件模式進行路由。

來源

2016-08-30 Aakanksha

一個例子小提琴的鏈接是你this.props.path適當支撐從父來的？你能打印和檢查一次嗎？你也可以分享你的父母組件一次從道具傳遞給LinkWidget –

道具正在被正確地返回@HarkiratSaluja。我再次檢查出來。 – Aakanksha

@Aakanksha如果您使用'to = {\'＃$ {this.props.path} \'}'，那麼如何？ – Thanh

解決方法很簡單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

來源

2016-08-30 11:19:25

我也試過這個，但它仍然以同樣的方式呈現錨點而沒有href支撐。 – Aakanksha

@Aakanksha你可以檢查this.props.path的值 –

是的，我得到'this.props.path'。我已經更新了這個問題，請看看它。我可能會錯過一些非常小的東西。 – Aakanksha

沒有href鏈接在反應路由器

回答

相關問題