Я здесь новичок и начинаю с React JS. Может ли кто-нибудь помочь мне с динамическим изменением фона img в зависимости от маршрута? Итак, если быть точным... Я создаю приложение для рецептов и хочу изменить фоновое изображение в зависимости от категории. Поэтому я хотел сделать это с помощью useParams(), но это не работает.

import { useParams } from 'react-router-dom';

function HeaderPicture() {
    let params = useParams();
    let headerPicture = "";

    if(params.name == "/cuisine/Fingerfood") {
        headerPicture = "https://images.unsplash.com/photo-1598449426314-8b02525e8733?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1026&q=80"
    }

    else {
        headerPicture = "https://images.unsplash.com/photo-1605851868183-7a4de52117fa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80"
    }

    return(
        <div className='top-picture' style={{ backgroundImage: `url(${headerPicture})` }}>
            <h1>Text1</h1>
            <h3>Text2</h3>
        </div>
    )  
}

export default HeaderPicture

Он всегда показывает второе изображение, поэтому кажется, что первое if() по какой-то причине не работает должным образом. Вот маршруты и они работают нормально. Все компоненты показаны так, как они должны.

<Routes location={location} key={location.pathname}>
          <Route path="/" element={<Home />} />
          <Route path="/cuisine/:type" element={<Cuisine />} />
          <Route path="/searched/:search" element={<Searched />} />
          <Route path="/recipe/:name" element={<Recipe />} />
          <Route path="/diet/:mediterranian" element={<Mediterranian />} />
      </Routes>

Заранее спасибо.

1
Krayzie 4 Окт 2022 в 21:47

2 ответа

Вы всегда должны использовать useState при попытке манипулировать DOM и useEffect, чтобы избежать побочных эффектов, подобных этому

import {
    useParams
} from 'react-router-dom';
import { useEffect, useState } from "react";

function HeaderPicture() {
    let params = useParams();
    let [headerPicture, setHeaderPicture] = useState("");

    useEffect(() => {
        if (params.name == "/cuisine/Fingerfood") {
            setHeaderPicture("https://images.unsplash.com/photo-1598449426314-8b02525e8733?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1026&q=80")
        } else {
            setHeaderPicture("https://images.unsplash.com/photo-1605851868183-7a4de52117fa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80")
        }

    }, [params.name]);

    return ( 
        <div className='top-picture'
        style = {
            {
                backgroundImage: `url(${headerPicture})`
            }
        }>
        <h1> Text1 </h1> 
        <h3> Text2 </h3> 
        </div>
    )
}

export default HeaderPicture
0
otejiri 4 Окт 2022 в 22:02

Чтобы обрабатывать параметры динамического маршрута, вам необходимо заменить эту строку:

if(params.name == "/cuisine/Fingerfood") {

С этим:

if (params.type === "Fingerfood") {

Так как ваш параметр называется type в ваших маршрутах.

Вы можете взглянуть на эту песочницу для живого рабочего примера этого решения.

0
Ahmet Emre Kilinc 4 Окт 2022 в 22:09