Форум программистов, компьютерный форум, киберфорум
React/ReactJS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
0 / 0 / 0
Регистрация: 16.08.2021
Сообщений: 1

Как обновить контент на странице из модального окна с использованием react-router-dom

16.08.2021, 16:15. Показов 3064. Ответов 0

Студворк — интернет-сервис помощи студентам
Существует модальное окно, которое добавляется на страницу, нажатием специальной кнопки, и полностью удаляется со страницы, нажатием на кнопку закрытия. Я хочу добавить <Link /> внутрь модального окна, но это не срабатывает, потому что добавить компонент модального окна в основной <Switch /> в App.js не вариант (ибо компонент модального окна ' абстрактный', то бишь он не рендерится как какой-нибудь компонент страницы, а добавляется и удаляется со страницы динамически). Я попытался использовать withRouter, но он изменил только URL без обновления страницы. Итак, как мне сделать навигацию?

app.js
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function App() {
    useEffect(main);
 
    return (
        <div className="wrapper">
            <Router>
                <Navbar/>
                <Switch>
                    <Route path="/:id" exact component={Category}></Route>
                    <Route path="/product/:id" exact component={Product}></Route>
                    <Route path="/booking/:uuid" component={Order}></Route> //по задумке ссылка должна рендерить Order компонент
                </Switch>
            </Router>
            <div className="footer black">
                footer
            </div>
        </div>
    );
}
 
export default App;
Тот самый проблемный компонент в котором по задумке должна быть ссылка
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function CartBottomMenu(props){
    const storage = props.Storage; //does'not matter
    const price = cartCountPriceUpdate();  //does'not matter
 
    const OrderBtn = withRouter(({history})=> (
        <div className="checkout-btn" id="checkout">
            <div className="default-btn" onClick={()=> history.push('/booking/1')}>Оформить заказ</div>
        </div>
    ))
 
    useEffect(()=>document.body.querySelector('#total-price').innerHTML = price); //does'not matter
 
    return(
        <div className="cart-bottom-menu">
            <div className="total-price" id="final-cart-price">
                <span className="total-price-title">Итого:</span>
                <span className="total-price-span">{price}</span>
            </div>
            <Router> //я знаю, что он тут не к месту. Просто добавил его для красоты (авось заработает)
                <OrderBtn/> //кнопка с ссылкой 
            </Router>
        </div>
    )
}
модальное окно добавляется в документ с помощью этой функции, передаваемой обработчику события. Сначала он добавляет на страницу «контейнер», а затем отображает внутри него модальный компонент.
JavaScript
1
2
3
4
5
6
7
8
9
10
11
export function RenderModal(Modal, ...args){
    return function(){
        if(document.querySelector('#modal')) return;
 
        let modal = document.createElement('div');
        modal.classList.add(...args);
        modal.id = 'modal';
        document.body.append(modal);
        ReactDOM.render(<Modal/>, modal)
   }
}
что-то вроде этого. CartModal - это модальный главный компонент.
JavaScript
1
document.body.querySelector('#cart').addEventListener('click', RenderModal(CartModal, 'modal-window'));
Нажатие кнопки закрытия запускает функцию, которая полностью удаляет модальное окно со страницы.
JavaScript
1
2
3
function closeModalWindow(window){
    window.parentNode.removeChild(window);
}
Скорее всего, это сомнительное решение, но единственное, до которого я смог додуматься
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
16.08.2021, 16:15
Ответы с готовыми решениями:

Routing react-router-dom
Здравствуйте столкнулся с проблемой при создании дочерних страниц вот так вот делаю Route &lt;Route path=&quot;/category&quot;...

Как навесить открытие модального окна по клику на ОДНУ ИЗ ДВУХ ссылок на странице
Прошу прощения за столь наивный вопрос, но подскажите как переписать код: var openpopap =...

Несовместимость React-Router и React-Bootstrap
Добрый день, Пишу маленький проект и в качестве дизайна решил использовать React-Bootstrap. При создании Навигации сайта использовал...

0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
16.08.2021, 16:15
Помогаю со студенческими работами здесь

React router - как загрузить на клиенте
Изучаю реакт. Если бы сервер был на node.js с этим не было бы проблем: npm и так далее. А сервер на php и react подключается посредством...

HTML DOM как с использованием Javascript создать узлы DOM
Доброго времени суток. хочу через Javascript по событию onclick добавить в html документ что то вроде: &lt;div&gt;hello world&lt;/div&gt;...

Сьезжает контент на странице при масштабирование окна браузера
При уменьшении окна браузера на 25% у меня весь контент вместе с хедером и дивом сьзжает в влево. помогите исправить. вот картинки ...

Не могу обновить Аvira, выскакивают рекламные окна на странице, и запускаются отдельные рекламные окна
Здравствуйте! Не могу обновить Аvira. Ошибка: служба Планировщика не запущена. В СЛУЖБАХ Планировщик не включается. Галочка ставится, но...

Скрипт модального окна! Как сделать закрытие окна через крестик?
var modal = document.getElementById('myModal'); var btn = document.getElementsByClassName(&quot;myBtn&quot;); var span =...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
1
Ответ Создать тему
Новые блоги и статьи
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами
8Observer8 20.02.2026
Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .
Конвертировать закладки radiotray-ng в m3u-плейлист
damix 19.02.2026
Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI
Eddy_Em 18.02.2026
Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .
Камера Toupcam IUA500KMA
Eddy_Em 12.02.2026
Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу
zbw 12.02.2026
И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.
«Знание-Сила»
zbw 12.02.2026
«Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 12.02.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 11.02.2026
Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru