Как реализовать роутинг между элементами внутри модального окна?

Question

[ksikrii]

Задание: Я консультант в чате и при нажатии на иконку пресетов у меня открывается модалка в которой есть табы между своими заготовленными фразами и всеми, которые используются в фирме. Также у меня есть возможность перейти к созданию, редактированию и удалению фразы. Обычные круд формы, которые внутри модалки. То есть основный вид - это перечень фраз, в каждую из которых можно перейти, редактировать, добавить новую и удалить.

Немного нептипичная для меня задача и хотел спросить совета о реализации. Как осущевствить роутинг внутри модалки между элементами?

Пока что на проекте - это сделано с помощью контектса, хуков. Из хука берется setActiveScreen функция в которую передается тип компонента и потом в свитче выплевывается нужный компонент. Но там чувак написал в контексте вложенный контекст и код в целом запутанный. Мне это кажется очень странным и дурацким кодом, в котором по несколько раз происходит лишний рендер. Там в самом вложенном контексте - есть общий компонент для хедера, для контента - из которых и отдаются другие компоненты, когда выбран и сохранен тип нужного компонента в useState из хука.
У меня есть внутренее ощущения неправильности кода, но в виду малого опыта разработки реальной с ходу не могу продумать правильний концепт для такой задачи. Там вообще, как у больгого все что нужно и не нужно обернуто в usememo, usecallback и т.д, фронтэндщик который там работает все очень криво реализовывает.

Код к сожалению и дизайн не могу показать, но я надеюсь, что из текста понятно задание. Если бы могли накидать шаблон для решения задачи, то был бы очень благодарен или текстом описать, чтобы я сам попробовал написать демку.

Comments

[szQocks]

можно реализовать через вложенные роуты, если хочешь переписать его код на роуты

Answer 1

[Erik Mironov]

1. Роутинг внутри модалки: Можно использовать библиотеку react-router-dom даже внутри модального окна для обеспечения роутинга между различными экранами.

Создайте отдельный <Switch> внутри модалки:

<Modal>
    <Switch>
        <Route path="/modal/presets" component={Presets} />
        <Route path="/modal/edit/:id" component={EditPhrase} />
        <Route path="/modal/create" component={CreatePhrase} />
        <Route path="/modal/delete/:id" component={DeletePhrase} />
        {/* ... */}
    </Switch>
</Modal>

2. Компоненты экранов: Разделите разные экраны модалки на отдельные компоненты. Это позволит упростить их управление и сделать код более читаемым.

3. Состояние: Вместо того чтобы использовать сложную систему контекстов, можно просто использовать локальное состояние (useState) или глобальное состояние (например, с помощью redux или mobx), в зависимости от ваших потребностей.

4. Хуки: Избегайте избыточного использования useMemo, useCallback и прочих, если нет явных причин для оптимизации. Часто избыточное использование этих хуков только усложняет код и на самом деле может замедлить приложение.

Псевдокод:

Основной компонент модалки:

function ModalComponent() {
    return (
        <Modal>
            <Switch>
                <Route path="/modal/presets" component={Presets} />
                <Route path="/modal/edit/:id" component={EditPhrase} />
                <Route path="/modal/create" component={CreatePhrase} />
                <Route path="/modal/delete/:id" component={DeletePhrase} />
                {/* ... */}
            </Switch>
        </Modal>
    );
}

Компонент пресетов:

function Presets() {
    const phrases = ... // получите фразы

    return (
        <div>
            {phrases.map(phrase => (
                <div key={phrase.id}>
                    {phrase.text}
                    <Link to={`/modal/edit/${phrase.id}`}>Редактировать</Link>
                </div>
            ))}
            <Link to="/modal/create">Создать новую фразу</Link>
        </div>
    );
}

Этот пример очень общий, но я надеюсь, что он даст вам представление о том, как можно структурировать ваш код. Если что-то кажется запутанным или избыточным, вероятно, так оно и есть