首頁猿問如何從反應中的某些頁面中刪除導航欄

如何從反應中的某些頁面中刪除導航欄

JavaScript

慕沐林林 2023-12-14 14:46:51

我正在構建一個網站，我不想在 2 個頁面中顯示導航欄。其中一個是 404 頁面，我將在其中提供一個重定向按鈕。另一個是網站的登陸頁面，我將在其中提供一個按鈕，該按鈕將重定向到網站的主頁。這是我的 app.js 代碼，我在其中定義了路線。import React from "react";import "./App.css";import { BrowserRouter as Router, Switch, Route } from "react-router-dom";import Navbar from "./Components/Navbar";import Home from "./Components/Pages/Home";import PlanYourTrip from "./Components/Pages/PlanYourTrip";import AboutUs from "./Components/Pages/AboutUs";import SafetyMeasures from "./Components/Pages/SafetyMeasures";import Travel from "./Components/Pages/Travel";import Error from "./Components/Pages/404";function App() { return ( <> <Router> <Navbar /> <Switch> <Route path="/" exact component={Travel} /> <Route path="/home" exact component={Home} /> <Route path="/plan-your-trip" exact component={PlanYourTrip} /> <Route path="/about-us" exact component={AboutUs} /> <Route path="/safety-measures" exact component={SafetyMeasures} /> <Route component={Error} /> </Switch> </Router> </> );}export default App;我想從<Route path="/" exact component={Travel} /> 和中刪除導航欄<Route component={Error} />。請幫忙。

查看完整描述

4 回答

Qyouu

TA貢獻1786條經驗獲得超11個贊

<Navbar />需要檢查 window.location 并渲染為空

請參閱https://reactrouter.com/web/api/Hooks/uselocation

或者創建一個新組件來執行檢查并將其呈現為子組件

<MayRenderNav><Navbar /></MayRenderNav>

反對回復 2023-12-14

慕田峪9158850

TA貢獻1794條經驗獲得超7個贊

要在 uke 答案上添加更多上下文，您可以使用導航欄中的 useLocation 鉤子并執行以下操作

// All the routes you want to exclude

const withouSidebarRoutes = ["/about"];

function Navbar() {

const {pathname} = useLocation();

// Validates if the current pathname includes one the routes you want to hide the sidebar is present on the current url

// If that's true render null instead of the sidebar

if (withouSidebarRoutes.some((item) => pathname.includes(item))) return null;

return (

//your navbar code.

)

}

include 很有用，因為如果您有類似的嵌套路由，about/1它也會排除該路由，如果您只想排除 about 頁面而不是嵌套頁面，請使用簡單的 equal 。

withouSidebarRoutes.some((item) => pathname === item)

檢查 hooks api 參考以了解 useLocation 可以做什么： https: //reactrouter.com/web/api/Hooks/uselocation

另外，我還有一個工作沙箱，其中一個側邊欄會在您位于“關于”部分時隱藏起來。 https://codesandbox.io/s/cranky-lewin-p8ozv

反對回復 2023-12-14

holdtom

TA貢獻1805條經驗獲得超10個贊

您的代碼的問題是<Navbar />組件將在不關心路由的情況下加載。

您可以簡單地將<Navbar />組件放入您想要加載的組件中，然后留給其他組件。

反對回復 2023-12-14

aluckdog

TA貢獻1847條經驗獲得超7個贊

這可能感覺有點作弊，但它確實有效。

從主頁隱藏導航欄（路徑=“/”）非常簡單。我們可以按照書本做，在“Route”中使用渲染。

棘手的部分是如何隱藏 404 錯誤頁面，該頁面與網站中的所有其他路由不匹配。

我使用的技巧是在錯誤頁面掛載時調用 useEffect，將導航欄的樣式更改為顯示：無；

import React from "react";

import { BrowserRouter as Router, Route, Switch, Link } from "react-router-dom";

import "./styles.css";

const NavBar = () => {

return (

<Link to="/about">About</Link>

<Link to="/contact">Contact</Link>

<Link to="/error">Error</Link>

</div>

);

};

const Home = () => (

<div>

<ul>

<li>

<Link to="/about">About</Link>

</li>

<li>

<Link to="/contact">Contact</Link>

</li>

</ul>

</div>

);

const About = () => <div>About</div>;

const Contact = () => <div>Contact</div>;

const Error = () => {

React.useEffect(() => {

document.getElementsByClassName("navbar")[0].style.display = "none";

}, []);

return (

<div>

<h1>Error</h1>

</div>

);

};

export default function App() {

return (

<Route

render={({ location }) => {

if (location.pathname !== "/") return <NavBar />;

}}

</Switch>

</Router>

);

}

body {

margin: 0;

padding: 0;

}

.App {

font-family: sans-serif;

text-align: center;

}

.navbar {

background: black;

color: white;

padding: 10px 20px;

}

.navbar a {

display: inline-block;

padding: 6px 12px;

text-decoration: none;

color: white;

text-transform: uppercase;

}

鏈接到沙箱

反對回復 2023-12-14

4 回答
0 關注
255 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何從反應中的某些頁面中刪除導航欄

如何從反應中的某些頁面中刪除導航欄

4 回答

添加回答