在 React-router 中没有带链接的 href

Posted 2023-03-05

【中文标题】在 React-router 中没有带链接的 href

【英文标题】：No href with Link In React-router

【发布时间】：2017-01-06 13:52:51

【问题描述】：

我在使用 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

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

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

【问题讨论】：

您的 this.props.path 道具是否正确来自父母？你可以打印和检查一次吗？你也可以分享你的父组件一次，从那里传递道具到 LinkWidget

道具正在正确返回@HarkiratSaluja。我又检查了一遍。

@Aakanksha 如果你使用这个to=`#$this.props.path` 怎么样？

@KienThanh，也没有运气。我已经更新了这个问题，希望它能给出一个关于出了什么问题的想法。谢谢

【参考方案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

【讨论】：

我也试过了，但是没有 href 属性，它仍然以相同的方式呈现锚。

@Aakanksha 你能检查一下 this.props.path 的值吗

是的，我得到了“this.props.path”。我已经更新了问题，请看一下。我可能错过了一些非常小的东西。