反应儿童仅应接收带有组件的单个React元素子元素

Question

我正在学习自己的反应。在我的渲染循环中，我尝试在其中添加元素，以便为每个数据创建超链接。但我有一个问题：反应。儿童仅应接收单个React元素子元素。有人知道为什么会这样吗？这是我的部分代码。希望能让我的问题更容易理解。我跳过了编码的一些部分，因为问题似乎发生在渲染部分。

应用程序。js

render() {
return (
  <Router className="App">
    <div>
      <nav className="navbar navbar-default">
        <div className="container-fluid">
          <Link to="/coding-fun">Coding Fun</Link>
        </div>
      </nav>
      <Switch>
        // import condingFun.js file as Coding  
        <Route exact path="/coding-fun" component={Coding} />
        <Route path="/coding-fun/:title" component={singleArticle} />

      </Switch>
    </div>
  </Router>
);

###

编码乐趣。js ps:posts是json数据，我没有在这里添加太多数据。

 class Coding extends Component {
   render() {
      return (
         <div className="nav-text">
            <h1>Coding fun page</h1>
            // posts is data from api, and it renders listPage.js as 
              ListPage 
            <ListPage items={posts} />
         </div>
       );
  }
}

 export default Coding;

列表age.js

import React, { Component } from "react";
import { BrowserRouter as Link } from "react-router-dom";

class Listing extends Component {
   constructor(props) {
     super(props);
     this.state = { data: this.props.items };
    }

   render() {
     return (
  <table>
    <tbody>
      // loop "post" data from parent component (items) codingFun.js  
      {this.state.data.map(post => (
        <tr key={post.id}>
          <td>
            <Link to={"coding-fun/" + post.title}>{post.title}</Link>
          </td>
          <td>{post.content}</td>
        </tr>
      ))}
    </tbody>
  </table>
  );
}

}

如果我只是添加

非常感谢




Answer 1

您混淆了路由器、链接和路由。所以基本上，

• Router用于包装整个应用程序，使其与fullstack相似，这意味着可以更改地址栏中的URL，并分别呈现特定视图

在您的情况下，您应该将导入语句更改为：

从react-router-dom导入{Link}

希望这有助于解决您的问题：）

Answer 2

我猜这是因为你导入错误。import语句应该是来自'react router dom'的import{Link}

Answer 3

属性to不存在于Browser路由器中。你也有点混淆现象Browser路由器与Link，因为在react-router中存在一个名为Link的实际组件。这就是你如何使用它：

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

<Link to={"coding-fun/" + post.title}>{post.title}</Link>