Javascript 如何从react中的某些页面删除导航栏
我正在建立一个网站，我不想显示在2页导航栏。一个是404页面，我将在其中给出一个重定向按钮。另一个是网站的登陆页，我将在那里给一个按钮，这将重定向到该网站的主页。这是我定义路线的app.js代码Javascript 如何从react中的某些页面删除导航栏,javascript,reactjs,Javascript,Reactjs,我正在建立一个网站，我不想显示在2页导航栏。一个是404页面，我将在其中给出一个重定向按钮。另一个是网站的登陆页，我将在那里给一个按钮，这将重定向到该网站的主页。这是我定义路线的app.js代码 import React from "react"; import "./App.css"; import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
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;
从“React”导入React；
导入“/App.css”；
从“react Router dom”导入{BrowserRouter as Router，Switch，Route}；
从“/Components/Navbar”导入导航栏；
从“/Components/Pages/Home”导入主页；
从“/Components/Pages/PlanYourTrip”导入PlanYourTrip；
从“/Components/Pages/AboutUs”导入AboutUs；
从“/Components/Pages/SafetyMeasures”导入安全度量值；
从“/组件/页面/行程”导入行程；
从“/Components/Pages/404”导入错误；
函数App（）{
返回(
);
}
导出默认应用程序；
您只需将您的
你可以简单地将你的
从“React”导入React；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch，Link}；
导入“/styles.css”；
常量导航栏=（）=>{
返回(
家
关于
接触
错误
);
};
常量Home=（）=>(
这是家
-
关于
-
接触
);
const About=（）=>About；
const Contact=（）=>Contact；
常量错误=（）=>{
React.useffect（（）=>{
document.getElementsByClassName（“navbar”）[0].style.display=“无”；
}, []);
返回(
错误
回家
);
};
导出默认函数App（）{
返回(
{
if（location.pathname！==“/”）返回；
}}
/>
);
}
正文{
保证金：0；
填充：0；
}
.App{
字体系列：无衬线；
文本对齐：居中；
}
navbar先生{
背景：黑色；
颜色：白色；
填充：10px 20px；
}
纳瓦尔先生{
显示：内联块；
填充：6px 12px；
文字装饰：无；
颜色：白色；
文本转换：大写；
}
这可能会让人觉得有点欺骗，但它确实起到了作用 从主页（path=“/”）隐藏导航栏非常简单。我们可以照本宣科，在“路线”中使用渲染 棘手的部分是如何隐藏404错误页面，该页面与网站中的所有其他路径都不匹配 我使用的技巧是在错误页面挂载时调用useEffect，将导航栏的样式更改为显示：none
从“React”导入React；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch，Link}；
导入“/styles.css”；
常量导航栏=（）=>{
返回(
家
关于
接触
错误
);
};
常量Home=（）=>(
这是家
-
关于
-
接触
);
const About=（）=>About；
const Contact=（）=>Contact；
常量错误=（）=>{
React.useffect（（）=>{
document.getElementsByClassName（“navbar”）[0].style.display=“无”；
}, []);
返回(
错误
回家
);
};
导出默认函数App（）{
返回(
{
if（location.pathname！==“/”）返回；
}}
/>
);
}
正文{
保证金：0；
填充：0；
}
.App{
字体系列：无衬线；
文本对齐：居中；
}
navbar先生{
背景：黑色；
颜色：白色；
填充：10px 20px；
}
纳瓦尔先生{
显示：内联块；
填充：6px 12px；
文字装饰：无；
颜色：白色；
文本转换：大写；
}
要在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.
)
}
about/1withouSidebarRoutes.some((item) => pathname === item)
要在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.
)
}
about/1withouSidebarRoutes.some((item) => pathname === item)