Как отобразить в компоненте 2 разных Outlet в разных местах?

Все привет возникла такая проблема, имеется вот такой вот компонент

import { Col, Layout, Row } from "antd";
import FilterIcon from "src/modules/Clips/components/FilterIcon/FilterIcon.tsx";
import { FC, FunctionComponent, ReactNode, useState } from "react";
import { useScreenResolution } from "@shared/hooks";
import FilterTemplate from "src/components/ListItemsTemplate/FilterTemplate/FilterTemplate.tsx";
import { Control, FieldValues } from "react-hook-form";
import classes from "./ListItemsTemplate.module.scss";

interface IProps {
  FilterBody: FunctionComponent<{ control: Control<FieldValues> }>;
  Body: ReactNode;
  handleFilterForm: (fields: FieldValues) => void;
}

const ListItemsTemplate: FC<IProps> = ({
  FilterBody,
  Body,
  handleFilterForm,
}) => {
  const [filter, setFilter] = useState<boolean>(false);
  const isMedia = useScreenResolution();

  const handleVisibleFilter = () => setFilter(true);

  return (
    <Layout className={classes.clipsContainer}>
      <Row justify={"space-between"} wrap={false}>
        <Col flex={"auto"} className={classes.clipsContent}>
          {Body}
        </Col>

        {/*Фильтры*/}
        {((filter && isMedia === "mobile") || isMedia === "desktop") && (
          <Col
            sm={{
              flex: "320px",
            }}
            className={classes.filter}
          >
            <FilterTemplate
              close={setFilter}
              FormBody={FilterBody}
              handleForm={handleFilterForm}
            />
          </Col>
        )}

        <FilterIcon onClick={handleVisibleFilter} />
      </Row>
    </Layout>
  );
};

export default ListItemsTemplate;


Т,е,, на данный момент я сделал компонент, где я пропсами передаю туда еще 2 компонента, которые отображаются в нужном месте. Но хотелось бы что бы это работало через Outlet, то есть я бы передавал 2 Outlet и как то по name оно бы определяло бы, куда что подставить имеется ли такая возможность в react-router-dom v6?
  • Вопрос задан
  • 45 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы