Мобильная версияЯ установил свои маршруты в файле App.js. но у меня возникла ошибка при изменении URL-адреса моего проекта. Я создал компонент состояния под названием movieState.js, в котором у меня есть 3 объекта с разными URL-адресами.
Поэтому каждый раз, когда я пишу «http://localhost:3000/work/bicycle», я получаю следующую ошибку: невозможно прочитать свойства неопределенного значения (чтение «путь»)
Это мой App.js:
//Стили импортировать "./styles/app.scss"; //Глобальный стиль из стилизованных компонентов импортировать GlobalStyle из "./comComponents/GlobalStyle"; //Маршрутизатор import { BrowserRouter as Router, Route, Routes } из «реагировать-маршрутизатор-дом»; //импортируем страницы импортировать AboutUs из «./pages/AboutUs»; импортировать OurWork из «./pages/OurWork»; импортировать ContactUs из «./pages/ContactUs»; импортировать MovieDetail из "./pages/MovieDetail"; //Навигационный компонент импортировать навигацию из './comments/Nav'; функция Приложение() { возвращаться ( ); } экспортировать приложение по умолчанию; Это мой movieState.js, в котором хранятся все мои данные;
//Импорт изображений импортировать {цвет} из "framer-motion"; импортировать велосипед из "./img/bycicle.jpg"; импортировать цветную стену из «./img/colorwall.jpg»; импортировать свет из "./img/light.jpg"; экспортировать const MovieState = () => { возвращаться [ { название: «Велосипед», Главное изображение: велосипед, вторичное изображение: велосипед, url: "/работа/велосипед", награды: [ { название: «Воистину шедевр», описание: «Lorem Ipsum — это просто текст-пустышка полиграфической и наборной индустрии.»», }, { title: "Свежий взгляд на жестокий вид спорта.", описание: «Lorem Ipsum — это просто текст-пустышка полиграфической и наборной индустрии.»», }, { title: "Все в порядке, имао.", описание: «Lorem Ipsum — это просто текст-пустышка полиграфической и наборной индустрии.»», }, ], }, { название: «Цветная стена», mainImg: цветная стена, URL: "/work/colorwall", вторичное изображение: цветная стена, награды: [ { название: «Воистину шедевр», описание: «Lorem Ipsum — это просто текст-пустышка полиграфической и наборной индустрии.»», }, { title: "Свежий взгляд на жестокий вид спорта.", описание: «Lorem Ipsum — это просто текст-пустышка полиграфической и наборной индустрии.»», }, { title: "Все в порядке, имао.", описание: «Lorem Ipsum — это просто текст-пустышка полиграфической и наборной индустрии.»», }, ], }, { название: «Свет», mainImg: свет, URL: "/работа/свет", вторичное изображение: светлый, награды: [ { название: «Воистину шедевр», описание: «Lorem Ipsum — это просто текст-пустышка полиграфической и наборной индустрии.»», }, { title: "Свежий взгляд на жестокий вид спорта.", описание: «Lorem Ipsum — это просто текст-пустышка полиграфической и наборной индустрии.»», }, { title: "Все в порядке, имао.", описание: «Lorem Ipsum — это просто текст-пустышка полиграфической и наборной индустрии.»», }, ], }, ]; };
Это мой nav.js:
импортировать React из «реагировать»; импортировать стили из «styled-comments»; импортировать {ссылку} из 'реагировать-маршрутизатор-дом'; функция Нав() { возвращаться ( Логотип [*]О нас [*]Наша работа [*]Свяжитесь с нами ) }
Moviedetail.js
import React, { useEffect, useState } из 'реагировать'; импорт {useNavigate} из 'реагировать-маршрутизатор-дом'; импортировать { MovieState } из '../movieState'; функция MovieDetail() { const Navigation = useNavigate(); const url = Navigation.location.pathname; const [movies,setMovies] = useState(MovieState); const [фильм, setMovie] = useState (нуль); //useEffect запускается после монтирования компонента useEffect(() => { const currentMovie = Movies.filter((stateMovie) => stateMovie.url === url); setMovie (текущийMovie); }, [фильмы,url]); возвращаться ( Подробности о фильме ) } экспортировать MovieDetail по умолчанию;
