Ожидается, что React.Children.only получит единственный дочерний элемент React с компонентом <Link>

Question

Я учусь реагировать на себя. В моем цикле рендеринга я попытался добавить элемент внутрь, чтобы я мог создать гиперссылку для каждого из данных. Но я получил эту проблему: React.Children.only должен был получить единственный дочерний элемент React. Может кто-нибудь знать, почему это произошло? Вот часть моего кода. Надеюсь, это облегчит понимание моего вопроса. Я пропустил некоторые части своего кода, так как кажется, что проблема произошла в части рендеринга.

app.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>
);

} }

codingFun.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;

listPage.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>
  );
}

}

Если я просто добавлю
<Link to={"coding-fun/" + post.title}>{post.title}</Link> в этой строке он получил «React.Children.only, как ожидается, получит единственный дочерний элемент React». вопрос. Если я добавлю только {post.title} в тег, проблем не будет. Поэтому я попытался сделать заголовок ссылкой в ​​каждом ряду. Но я не знаю, как это сделать.

Большое спасибо

Answer 1

Полагаю, это потому, что вы неправильно выполняете импорт. Оператор импорта должен быть import { Link } from 'react-router-dom'

Answer 2

Вы путаете между Router, Link и Route. В общем,

• Router используется, чтобы обернуть все ваше приложение, чтобы сделать его fullstack-like , что означает, что URL в адресной строке может быть изменен, а конкретное представление отображается соответственно
• Link используется так же, как тег <a>, что означает, что при переходе по этому URL вы попадете на этот URL
• Route, с другой стороны, используется для определения того, что следует отображать по определенной ссылке. Это то, что вы должны использовать, чтобы передать дочерний компонент

В вашем случае вы должны изменить оператор import на:

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

Надеюсь, это поможет решить вашу проблему:)

Answer 3

Свойство to не существует в BrowserRouter. Вы также немного запутываетесь, добавляя псевдонимы BrowserRouter к Link, потому что в реагирующем маршрутизаторе существует фактический компонент с именем Link. И вот как вы это используете:

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

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