работает переход на страницу с одним фильмом

src/components/cardFilm/CardFilm.jsx

@@ -1,8 +1,23 @@
 import PropTypes from 'prop-types';
 import './CardFilm.css';
+import { useSearchParams } from 'react-router-dom/dist';
+import { Link } from 'react-router-dom/dist';
 
 const CardFilm = ({ movie }) => {
 
+	const [, setSearchParams] = useSearchParams();
+
+	const handleClick = () => {
+		setSearchParams((prevParams) => {
+			return new URLSearchParams({
+				...Object.fromEntries(prevParams.entries()),
+				...{
+					movie: movie.id
+				},
+			});
+		});
+	}
+
 	const handleAnchorClick = (event, action) => {
 		event.preventDefault();
 		action();
@@ -17,9 +32,10 @@ const CardFilm = ({ movie }) => {
 	return (
 		<>
 			<div className="card-film d-flex flex-column justify-content-center align-items-center mb-5 mb-md-0">
-				<img src={movie.image} className="img-fluid rounded-3" id="img-fluid" />
+				<Link onClick={handleClick}>
+					<img src={movie.image} className="img-fluid rounded-3" id="img-fluid" />
+				</Link>
 				<div className="icons w-50 d-flex justify-content-around mt-1 mb-1">
-
 					<svg id="icon-heart" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
 						className="my-icon bi bi-heart" viewBox="0 0 16 16" onClick={(event) => handleAnchorClick(event, toggleFavorite)}>
 						<path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15" />

src/components/movies/hooks/MoviesFilterHook.js

@@ -1,8 +1,8 @@
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from "react-router-dom";
-import useCategories from '../../categories/hooks/CategoriesHook';
+import useCategories from "../../categories/hooks/CategoriesHook";
 
 const useCategorieFilter = () => {
-    const filterName = 'categorie';
+    const filterName = "categorie";
 
     const [searchParams, setSearchParams] = useSearchParams();
 
@@ -20,9 +20,17 @@ const useCategorieFilter = () => {
 
     return {
         categories,
-        currentFilter: searchParams.get(filterName) || '',
+        currentFilter: searchParams.get(filterName) || "",
         handleFilterChange,
     };
 };
 
+export const useMovieIdFilter = () => {
+    const filterName = "movie";
+
+    const [searchParams] = useSearchParams();
+
+    return searchParams.get(filterName) || "";
+};
+
 export default useCategorieFilter;

src/components/movies/hooks/MoviesHook.js

@@ -1,5 +1,5 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState } from "react";
-import MoviesApiService from '../service/MoviesApiService.js';
+import MoviesApiService from "../service/MoviesApiService.js";
 
 const useMovies = (categorieFilter) => {
     const [moviesRefresh, setMoviesRefresh] = useState(false);
@@ -7,7 +7,7 @@ const useMovies = (categorieFilter) => {
     const handleMoviesChange = () => setMoviesRefresh(!moviesRefresh);
 
     const getMovies = async () => {
-        let expand = '?_expand=categorie';
+        let expand = "?_expand=categorie";
         if (categorieFilter) {
             expand = `${expand}&categorieId=${categorieFilter}`;
         }
@@ -26,4 +26,22 @@ const useMovies = (categorieFilter) => {
     };
 };
 
+export const useMovie = (movieId) => {
+    const [moviesRefresh] = useState(false);
+    const [movie, setMovie] = useState([]);
+
+    const getMovie = async () => {
+        let expand = "?_expand=categorie";
+        const data = await MoviesApiService.get(movieId, expand);
+        setMovie(data ?? []);
+    };
+
+    useEffect(() => {
+        getMovie();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [moviesRefresh, movieId]);
+
+    return movie;
+};
+
 export default useMovies;

src/pages/Catalog.jsx

@@ -5,6 +5,8 @@ import RowCategories from '../components/RowCategories/RowCategories';
 import useCategories from '../components/categories/hooks/CategoriesHook';
 import RowFilms from '../components/RowFilms/RowFilms';
 import { splitByRows } from '../components/utils/funcs';
+import { useMovie } from '../components/movies/hooks/MoviesHook';
+import { useMovieIdFilter } from '../components/movies/hooks/MoviesFilterHook';
 
 const Catalog = () => {
 
@@ -14,7 +16,47 @@ const Catalog = () => {
 
 	const { movies } = useMovies(currentFilter);
 
-	if (currentFilter == "") {
+	const movieIdFilter = useMovieIdFilter();
+
+	const movie = useMovie(movieIdFilter);
+
+	if (movieIdFilter) {
+		return (
+			<>
+				<main className="main-frame-viewing d-flex flex-row flex-fill justify-content-around">
+					<div className="frame-card-film d-flex flex-column justify-content-center align-items-center m-4">
+						<video controls className='card-viewing-film rounded-3 m-2' poster='https://placehold.co/600x400'>
+						</video>
+					</div>
+					<div className="frame-info-about-film d-flex flex-column justify-content-around m-3">
+						<p className='name-viewed-film text-center'>
+							{movie.name}
+						</p>
+						<p className='description-viewed-film text-center'>
+							{movie.description}
+						</p>
+					</div>
+
+				</main>
+			</>
+		);
+	}
+	else if (currentFilter) {
+		const moviesByRow = splitByRows(movies, 3);
+
+		return (
+			<>
+				<main className="main-page flex-fill d-flex justify-content-center" id='catalog-page'>
+					<div className="content-film d-flex flex-column justify-content-around" id="content">
+						{
+							moviesByRow.map((moviesRow, index) => <RowFilms movies={moviesRow} key={index} />)
+						}
+					</div>
+				</main >
+			</>
+		);
+	}
+	else {
 
 		const categoriesByRow = splitByRows(categories, 3);
 
@@ -31,19 +73,6 @@ const Catalog = () => {
 		);
 	}
 
-	const moviesByRow = splitByRows(movies, 3);
-
-	return (
-		<>
-			<main className="main-page flex-fill d-flex justify-content-center" id='catalog-page'>
-				<div className="content-film d-flex flex-column justify-content-around" id="content">
-					{
-						moviesByRow.map((moviesRow, index) => <RowFilms movies={moviesRow} key={index} />)
-					}
-				</div>
-			</main >
-		</>
-	);
 
 
 };