路由链接出现警告：“链接是空元素标记，不能具有`children`或使用`props.dangerouslySetInnerHTML`。”

Question

我第一次使用React-Router。当我尝试使用它时，出现了以下警告并且它不能正常工作："Warning: link is a void element tag and must not have children or use props.dangerouslySetInnerHTML. Check the render method of Loginpanel."

我的代码如下。

render() {

    return (

        <div >

            <input type="email" />
            <input type="password"/><br/>

         <link to="Index">   BLOCK
         </link>

        </div>

       )
    }
  }

我的主要 main.js 文件如下

    render(
  <Router history={hashHistory}>

      <Route path="/" component={Loginpanel} >
    <Route path="Index" component={App}/>
      <Route path="Form" component={Form} />
          </Route>


    </Router>,
   document.getElementById('js-main'));

提前致谢。

- komal deep singh chahal

Answer 1

在 react-router-dom 中使用 Link 而不是 link。你能试一下吗？

import { Link } from "react-router-dom"

和

<Link to="Index">BLOCK</Link>

- Harkirat Saluja

---

如果那么有趣，你本可以写成“Link”而不是“link”，我只是想帮忙。 - Harkirat Saluja

对不起，你是正确的。链接是错误的。第一次我没有看到你的评论。我接受了你的答案并给了你点数，非常感谢你，伙计。 - komal deep singh chahal

是的，那就是我的问题。在找到这个问题之前，我花了好15分钟进行调试。 - james-see

感谢您提供的解决方案，这对我也有帮助。 - Ahmed C

Answer 2

将link改为Link

第一个字母大写。

- kfpanda

Answer 3

如果您正在使用react-router 4版本，则这是正确导入Link的方法。

import { Link } from 'react-router-dom';

因为React Router项目现在已经被拆分成几个不同的库。

- Karim Samir

Answer 4

在补充Harkirat Saluja的回答时： 渲染方法示例:

render() {

    return (

        <div>
          <Link to="Index">It Link, not link </Link>
       </div>
    )
}

- Samuel Diogo

Answer 5

// 在导入链接和内部div时，{L}应该稍后大写

import { Link } from 'react-router-dom';

render() {

return (
   <div>
      <Link to="Index">It Link, not link </Link>
   </div>
);

}

- Faruk