При переходе на другой Route теряются props.Что делаю неправильно и как лучше это осуществить?

Question

[Tryasline]

Всех приветствую. Я начинающий React разработчик и столкнулся с такой проблемой. Когда перехожу на другой Route, то теряются пропсы и приложение падает.Есть список статей, и при клике на title она должна разворачиваться отдельно.
Для этого сделал обёртку для компонента статьи, чтобы в зависимости от условий выводился или список статей или одна статья.
Для вывода одной статьи брал параметр из URL и осуществлял поиск массиву, а нужный элемент клал в локальный стейт для дальнейшего вывода. Но выясняется, что пропсы undefined.
APP

const App = () => {
  const disptach = useAppDispatch();
  const { article, articlesCount } = useAppSelector(
    (state) => state.articleReducer
  );
  useEffect(() => {
    disptach(fetchArticle());
  }, [disptach]);
  return (
    <Routes>
      <Route path="/" element={<Layout />}>
        <Route
          index
          element={
            <WrappedArticleItemList
              articles={article}
              articlesCount={articlesCount}
            />
          }
        />
        <Route
          path="/articles/:slug"
          element={
            <WrappedArticleItemList
              articles={article}
              articlesCount={articlesCount}
            />
          }
        />
        <Route path="#" element={<div>Not found</div>} />
      </Route>
    </Routes>
  );
};

WrappedArticleItemList

interface ArtickeItemProps {
  articles: Article[];
  articlesCount: number;
}

const WrappedArticleItemList = (props: ArtickeItemProps) => {
  debugger;
  const [page, setPage] = useState(1);
  const [oneArticle, setOneArticle] = useState({});

  const dispatch = useAppDispatch();
  const { slug } = useParams();

  useEffect(() => {
    const arr = [...props.articles!];
    arr!.filter((articl): void => {
      console.log(articl);
      if (articl.slug === slug) {
        setOneArticle(articl);
        console.log(articl);
      }
    });
  }, [slug]);
  console.log(slug);
  console.log(oneArticle);
  console.log(props.articles);

  useEffect(() => {
    dispatch(fetchArticlePage(page));
  }, [page, dispatch]);

  const changePage = (page: number) => {
    setPage(page);
  };

  if (!slug) {
    const countPage = Math.ceil((props.articlesCount / 5) * 10);
    return (
      <>
        {props.articles!.map((articl) => (
          <div className="container" key={articl.slug}>
            <ArticleItem {...articl} />
          </div>
        ))}
        <div className={classes.paginationArticle}>
          <Pagination
            defaultCurrent={1}
            total={countPage}
            onChange={(page) => changePage(page)}
          />
        </div>
      </>
    );
  } else if (slug) return <ArticleItem {...oneArticle} />;
  else return <div>Hello</div>;
};

ArticleItem

const ArticleItem = ({
  title,
  description,
  favoritesCount,
  tagList,
  author,
  slug,
  createdAt,
}: any) => {
  let unikKey = 100;
  return (
    <div className={clasess.articleWrapp}>
      <div className={clasess.articleHeader}>
        <div className={clasess.articleInfo}>
          <div className={clasess.titleWrap}>
            <span className={clasess.title}>
              <Link to={`/articles/${slug}`}>{title}</Link>
            </span>
            <span className={clasess.img}>
              <img src={heart} alt="heart" />
            </span>
            <span>{favoritesCount}</span>
          </div>
          <div className={clasess.tagWrap}>
            {tagList.length > 0
              ? tagList.map((tag: string) => {
                  if (tag === null) return <span key={unikKey++}>#</span>;
                  else return <span key={unikKey++}>{tag}</span>;
                })
              : null}
          </div>
        </div>
        <div className={clasess.authorInfo}>
          <div className={clasess.nameData}>
            <span>{author.username}</span>
            <span className={clasess.timePost}>
              {format(new Date(createdAt), "MMMM d,y")}
            </span>
          </div>
          <div className={clasess.img}>
            <img src={logo} alt="#" />
          </div>
        </div>
      </div>
      <div className={clasess.articleDesraption}>
        <p className={clasess.description}>{description}</p>
      </div>
    </div>
  );
};

Comments

[szQocks]

По адресу /articles/:slug - сделай отдельную страницу ( отдельный компонет ), а не делай одну страницу ( один компонент для двух страниц ) и все эти мухосранские условия, в которых последнее даже не отрабатывает else return <div>Hello</div>;

[Tryasline]

Спасибо, большое) Именно так и поступил