Почему моя «to» опора в моем приложении Link of React не определена? - PullRequest
0 голосов
/ 23 января 2020

Первый блок кода - это мой родительский компонент

  const [articleState, setArticles] = useState({
    articles: [],
    isFetching: false
  });
  useEffect(() => {
        const url = ---MYURL---;
        const fetchArticles = async () => {
          try {
            setArticles({ articles: articleState.articles, isFetching: true });
            const response = await fetch(url);
            const data = await response.json();
            setArticles({ articles: data.response.docs, isFetching: false });
          } catch (e) {
            console.log(e);
            setArticles({ articles: articleState.articles, isFetching: false });
          }
        };
        fetchArticles();
        //eslint-disable-next-line
      }, []);

При рендеринге я передаю массив статей из состояния

<Articles articles={articleState.articles} loading={articleState.isFetching} />

Массив передается компоненту как статьи в Блок кода ниже.

import React from "react";
import { Link } from "react-router-dom";    
    const Articles = ({ articles, loading }) => {
          if (loading) return <h2>loading...</h2>;
          return (
            <ul>
              {articles.length !== 0
                ? articles.map((article, index) => (
                    <li
                      key={`${index}__${article.print_section}__${article.print_page}__${article._id}`}
                    >
                      <Link path={`/${article.headline.main}`}>
                        {article.headline.main}
                      </Link>
                    </li>
                  ))
                : null}
            </ul>
          );
        };

Аргумент article.headline.main в дочернем элементе отображается нормально, но для поддержки в Link я получаю неопределенную ошибку в консоли.

Warning: Failed prop type: The prop `to` is marked as required in `Link`, but its value is `undefined`.

1 Ответ

1 голос
/ 23 января 2020

Атрибут 'path' должен быть 'to'.

<Link to={`/${article.headline.main}`}>
       {article.headline.main}
</Link>

Всегда читайте документы перед использованием новой библиотеки React Router Docs .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...