Все привет возникла такая проблема, имеется вот такой вот компонент
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?