ReactJS: скрыть нижний колонтитул на определенных маршрутах или во время определенных действий, таких как поиск [закрыто ⇐ Javascript

[Anonymous]

Я хочу скрыть компонент нижнего колонтитула, когда отображается тело (домашняя страница) и выполняется поиск. Тем не менее, нижний колонтитул должен оставаться видимым на других страницах, таких как о или контакте. Это работает, как и ожидалось. Вместо этого нижний колонтитул либо всегда виден, либо скрыт. /> Вот мой соответствующий код:
> body.js

Код: Выделить всё

  import RestuarantCard, { withPromotedLabel } from "./RestuarantCard";
import { useEffect, useState } from "react";
import Shimmer from "./Shimmer";
import { Link } from "react-router-dom";
import Footer from "./Footer";

const Body = () => {
const [listOfRestaurants, setListOfRestraunt] = useState([]);
const [filteredRestuarant, setfilteredRestuarant] = useState([]);
const [searchText, setsearchText] = useState("");
const [isSearching, setIsSearching] = useState(false); // Add isSearching state

const RestaurantCardPromoted = withPromotedLabel(RestuarantCard);

useEffect(() => {
fetchData();
}, []);

const fetchData = async () => {
const data = await fetch(
"https://thingproxy.freeboard.io/fetch/https://www.swiggy.com/dapi/restaurants/list/v5?lat=12.9352403&lng=77.624532&is-seo-homepage-enabled=true&page_type=DESKTOP_WEB_LISTING"
);
const json = await data.json();
setListOfRestraunt(json?.data?.cards[1]?.card?.card?.gridElements?.infoWithStyle?.restaurants);
setfilteredRestuarant(json?.data?.cards[1]?.card?.card?.gridElements?.infoWithStyle?.restaurants);
};

if (!listOfRestaurants || listOfRestaurants.length === 0) {
return ;
}

return (


 {
setsearchText(e.target.value);
}}
/>

 {
const filteredRestuarant = listOfRestaurants.filter((res) =>
res.info.name.toLowerCase().includes(searchText.toLowerCase())
);

setfilteredRestuarant(filteredRestuarant);

// Set isSearching to true when search is performed
setIsSearching(true); // Reset when input is cleared
// Debugging log
}}
>
Search



 {
const filteredList = listOfRestaurants.filter((res) => res.info.avgRating > 4.3);
setListOfRestraunt(filteredList);
}}
>
Top Rated Restaurants




{filteredRestuarant.map((restaurant) => (
[*]
{restaurant.info.promoted ? (

) : (

)}

))}

{/* Pass isSearching state to Footer */}


);
};

export default Body;

> Footer.js

Код: Выделить всё

 import { PLAY_STORE, APPLE_STORE, FOOTER_LOGO, INSTA_LOGO, LINKEDIN_LOGO, TWITTER_LOGO, FACEBOOK_LOGO } from "../utils/constants";

const Footer = ({ isSearching }) => {
console.log("Footer received isSearching:", isSearching); // Debugging log

// If searching, don't show the footer
if (isSearching) {
return null;
}

return (



{/* Header Text */}

For better experience, download the Hangry app now


[img]{PLAY_STORE} alt=[/img]
[img]{APPLE_STORE} alt=[/img]






[img]{FOOTER_LOGO} alt=[/img]
© 2024 Hangry Limited

Company
[list]
About Us
[*]Life at Hangry
[*]Hangry DineOut
[*]Hangry Instamart
[/list]

Contact Us
[list]
[*]Help & Support
[*]Partner with us
[/list]

Legal
[list]
[*]Terms & Conditions
[*]Cookie Policy
[*]Privacy Policy
[/list]

Social Links
[list]
[*]
[img]{INSTA_LOGO} alt=[/img]

[*]
[img]{LINKEDIN_LOGO} alt=[/img]

[*]
[img]{TWITTER_LOGO} alt=[/img]

[*]
[img]{FACEBOOK_LOGO} alt=[/img]

[/list]




);
};

export default Footer;

> app.js

Код: Выделить всё

import React from "react";
import ReactDOM from "react-dom/client";
import Header from "./components/Header";
import Body from "./components/Body";
import About from "./components/About";
import Contact from "./components/Contact";
import Error from "./components/Error";
import Cart from "./components/Cart";
import Footer from "./components/Footer";
import RestaurantMenu from "./components/RestaurantMenu";
import { createBrowserRouter, Outlet, RouterProvider } from "react-router-dom";
import { Provider } from "react-redux"; //bridge between react and redux (like we want to provide store to our app/ react)
import appStore from "./utils/appStore";

/* header - Logo, nav items
body - Search bar, restaurant container(restro card)
Footer  - copyright, contact, links, address
*/

//Can we do both named and default export in same file???

const AppLayout = () => {
return (







);
};
const appRouter = createBrowserRouter([
{
path : "/",
element : ,
children:[
{
path: "/",
element: ,
},
{
path: "/about",
element: ,
},
{
path: "/contact",
element: ,
},
{
path: "restauarants/:resid",
/** resid is dynamic */
element : ,

},
{
path:"/Cart",
element: ,
},

],
errorElement: ,
}
]);

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render();

Есть ли лучший способ условно скрыть нижний колонтитул на определенных компонентах/страницах в React Router? Пожалуйста, помогите!


Подробнее здесь: https://stackoverflow.com/questions/793 ... ike-search