Маршрутизация с Link не работает с Const Component реагирует на реду

Question

Я хочу ссылку в, но тогда я не знаю, как использовать ее с const с классом, он работает.Может кто-нибудь объяснить, пожалуйста, о const компонентов

                import React from 'react';
            import { connect } from 'react-redux';
            import { Link } from 'react-router';

            const mapStateToProps=  state =>{
                return { articles :state.articles};
            }
            const connectedList = ({ articles }) =>(
                articles.map(e=>(
                    <li key={e.id}>{e.title}</li>
                ))
                <Link to="/Form">Form</Link>//// this line is error thrown
            );

            const List= connect(mapStateToProps)(connectedList);
            export default List;

Я знаю, что я делаю это неправильно, так как я понятия не имею, как мне добиться этого правильным путем

Answer 1

У вас есть некоторые синтаксические ошибки.Самое главное, что ваш «connectedList» на самом деле ничего не возвращал / не рендерил.

Вы бы столкнулись с другими проблемами, потому что вы не обернули массив из <li> s в <ul>, но также, компонент React render ожидает, что на верхнем уровне будет только один элемент - поэтому я завернул все в <div>.

Я очистил некоторые элементы для ясности ииспользовал класс React вместо функционального компонента:

import React from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router';

class List extends React.Component {
  render() {
    const { articles } = this.props
    const articleListItems = articles.map(article => {
      return <li key={article.id}>{article.title}</li>
    })
    return (
        <div>
          <ul>
            {articleListItems}
          </ul>
          <Link to="/Form">Form</Link>
        </div>
    )
  }
}

const mapStateToProps = state => {
  return {
    articles: state.articles
  }
}

const ListContainer = connect(mapStateToProps, null)(List)
export default ListContainer