import {useParams, redirect} from 'react-router-dom'; import {HOTELS} from '../../constants'; export const Hotel = () => { const {hotelIndex} = useParams<{hotelIndex: string}>(); i

Вопрос пользователя:

import {useParams, redirect} from 'react-router-dom'; import {HOTELS} from '../../constants'; export const Hotel = () => { const {hotelIndex} = useParams<{hotelIndex: string}>(); if (!hotelIndex) { redirect('hotel-list'); return null; } const hotel = HOTELS[Number(hotelIndex)]; return <> <h1>{hotel.title}</h1> <figure> <img width={200} src={hotel.img} alt="Elephant at sunset" /> <figcaption>{hotel.description}</figcaption> </figure> </> }; Сейчас нажатие на отель на странице отелей перенаправляет пользователя на страницу отеля. Для удобства пользователей сделайте так, чтобы при нажатии на карточку отеля открывалось модальное окно, а URL-адрес менялся на адрес страницы отеля. Если пользователь перейдет по прямой ссылке, должна открываться страница одного отеля без модального окна. Для вашего удобства мы уже предусмотрели и отделили страницу отеля от лейаута. Чтобы отрисовать страницу в модальном окне, оберните её в компонент Modal. Для реализации используйте пропс state у компонента Link и используйте этот стейт для определения текущего пути в роутере. // import { // Routes, // Route, // } from 'react-router-dom'; // import {Home} from '../pages/Home'; // import {HotelList} from '../pages/HotelList'; // import {Hotel} from '../pages/Hotel'; // import {Layout} from '../components/Layout'; // import {Modal} from '../components/Modal'; // export const App = () => { // return ( // <> // <Routes> // <Route path='/' element={<Home />} /> // <Route path='/hotel-list' element={<HotelList />} /> // <Route path='/hotel/:hotelIndex' element={<Layout><Hotel /></Layout>} /> // </Routes> // </> // ) // };

Ответ нейросети:

Пройдите быструю авторизацию для просмотра:

import { Routes, Route, useLocation } from 'react-router-dom';

import { Home } from '../pages/Home'; import { HotelList } from '../pages/HotelList'; import { Hotel } from '../pages/Hotel'; import { Layout } from '../components/Layout'; import { Modal } from '../components/Modal';

export const App = () => { const location = useLocation(); const isModal = location.state && location.state.modal;

return (
    <>
        <Routes>
            <Route path='/' element={<Home />} />
            <Route path='/hotel-list' element={<HotelList />} />
            <Route path='/hotel/:hotelIndex' element={<Layout>{isModal ? <Modal><Hotel /></Modal> : <Hotel />}</Layout>} />
        </Routes>
    </>
)

};

Now, when a user clicks on a hotel card, the Hotel page will be displayed either in a modal window or as a standalone page depending on the route state. If the user navigates directly to the hotel page, it will be displayed without the modal window.

Напишите нам, если в вопросе есть ваши персональные данные (yasnoponyatno24@yandex.ru)

return ( <> <Routes> <Route path='/' element={<Home />} /> <Route path='/hotel-list' element={<HotelList />} /> <Route path='/hotel/:hotelIndex' element={<Layout>{isModal ? <Modal><Hotel /></Modal> : <Hotel />}</Layout>} /> </Routes> </> )

ЯсноПонятно24

Пройдите быструю авторизацию для просмотра:

Пройдите быструю авторизацию для просмотра:

Последние вопросы: