我想在某些頁面中隱藏頁腳組件
應用程式.js：
<div className="App">
<Header setShowMenu={setShowMenu} />
{showMenu ? <Menu navigateTo={navigateTo} setShowMenu={setShowMenu} /> : null}
<Main navigateTo={navigateTo} />
<Footer navigateTo={navigateTo} />
</div>
main.jsx：
<div>
<Routes>
<Route path="/" element={<HomePage navigateTo={navigateTo} />} />
<Route path="/precard" element={<PreCard />} />
<Route path="/order" element={<Order />} />
<Route path="/contact" element={<Contact />} />
<Route path="/thankspage" element={<ThanksPage navigateTo={navigateTo}/>} />
<Route path="/*" element={<HomePage />} />
</Routes>
</div>
注意：index.js 中的 Router
所以我想隱藏./order頁面中的頁腳
我希望你們為我提供解決方案:)
uj5u.com熱心網友回復：
您可以使用useLocation()鉤子檢查<Footer />組件中的路由路徑，并根據pathname您可以渲染<Footer />組件。
例子 ：
import React from "react";
import { useLocation } from "react-router-dom";
const Footer = () => {
const { pathname } = useLocation();
console.log(pathname);
// you can check a more conditions here
if (pathname === "/thanks") return null;
return <div className="footer">Footer</div>;
};
export { Footer };
應用程式.js
import { Route, Switch, BrowserRouter } from "react-router-dom";
import "./styles.css";
import { Home } from "./pages/Home";
import { Catalog } from "./pages/Catalog";
import { Thanks } from "./pages/Thanks";
import { Header } from "./components/Header";
import { Footer } from "./components/Footer";
import { Page404 } from "./pages/Page404";
const App = () => {
return (
<>
<BrowserRouter>
<Header />
<Switch>
<Route path={"/"} exact>
<Home />
</Route>
<Route path={"/catalog"} exact>
<Catalog />
</Route>
<Route path={"/thanks"} exact>
<Thanks />
</Route>
<Route path={"*"}>
<Page404 />
</Route>
{/* <Redirect to={'/'} /> */}
</Switch>
<Footer />
</BrowserRouter>
</>
);
};
export { App };
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/394546.html
標籤：javascript 反应 反应钩子 反应路由器 组件
上一篇：異步函式回傳承諾
下一篇：我不能洗掉生成的元素