如何从反应中的某些页面中删除导航栏

Question

我正在构建一个网站，我不想在 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} />。请帮忙。

Answer 1

<Navbar />需要检查 window.location 并渲染为空请参阅https://reactrouter.com/web/api/Hooks/uselocation或者创建一个新组件来执行检查并将其呈现为子组件<MayRenderNav><Navbar /></MayRenderNav>

Answer 2

要在 uke 答案上添加更多上下文，您可以使用导航栏中的 useLocation 钩子并执行以下操作// All the routes you want to excludeconst withouSidebarRoutes = ["/about"];function Navbar() {&nbsp; &nbsp;const {pathname} = useLocation();&nbsp; &nbsp;// Validates if the current pathname includes one the routes you want to hide the sidebar is present on the current url&nbsp; // If that's true render null instead of the sidebar&nbsp; &nbsp;if (withouSidebarRoutes.some((item) => pathname.includes(item))) return null;&nbsp;return (&nbsp; //your navbar code.&nbsp;)}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

Answer 3

您的代码的问题是<Navbar />组件将在不关心路由的情况下加载。您可以简单地将<Navbar />组件放入您想要加载的组件中，然后留给其他组件。

Answer 4

这可能感觉有点作弊，但它确实有效。从主页隐藏导航栏（路径=“/”）非常简单。我们可以按照书本做，在“Route”中使用渲染。棘手的部分是如何隐藏 404 错误页面，该页面与网站中的所有其他路由不匹配。我使用的技巧是在错误页面挂载时调用 useEffect，将导航栏的样式更改为显示：无；import React from "react";import { BrowserRouter as Router, Route, Switch, Link } from "react-router-dom";import "./styles.css";const NavBar = () => {&nbsp; return (&nbsp; &nbsp; <div className="navbar">&nbsp; &nbsp; &nbsp; <Link to="/">Home</Link>&nbsp; &nbsp; &nbsp; <Link to="/about">About</Link>&nbsp; &nbsp; &nbsp; <Link to="/contact">Contact</Link>&nbsp; &nbsp; &nbsp; <Link to="/error">Error</Link>&nbsp; &nbsp; </div>&nbsp; );};const Home = () => (&nbsp; <div>&nbsp; &nbsp; <h1>This is home</h1>&nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; <Link to="/about">About</Link>&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; <Link to="/contact">Contact</Link>&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; </ul>&nbsp; </div>);const About = () => <div>About</div>;const Contact = () => <div>Contact</div>;const Error = () => {&nbsp; React.useEffect(() => {&nbsp; &nbsp; document.getElementsByClassName("navbar")[0].style.display = "none";&nbsp; }, []);&nbsp; return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <h1>Error</h1>&nbsp; &nbsp; &nbsp; <Link to="/">Back to home</Link>&nbsp; &nbsp; </div>&nbsp; );};export default function App() {&nbsp; return (&nbsp; &nbsp; <Router>&nbsp; &nbsp; &nbsp; <Route&nbsp; &nbsp; &nbsp; &nbsp; render={({ location }) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (location.pathname !== "/") return <NavBar />;&nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; <Switch>&nbsp; &nbsp; &nbsp; &nbsp; <Route path="/" exact component={Home} />&nbsp; &nbsp; &nbsp; &nbsp; <Route path="/about" component={About} />&nbsp; &nbsp; &nbsp; &nbsp; <Route path="/contact" component={Contact} />&nbsp; &nbsp; &nbsp; &nbsp; <Route component={Error} />&nbsp; &nbsp; &nbsp; </Switch>&nbsp; &nbsp; </Router>&nbsp; );}body {&nbsp; margin: 0;&nbsp; padding: 0;}.App {&nbsp; font-family: sans-serif;&nbsp; text-align: center;}.navbar {&nbsp; background: black;&nbsp; color: white;&nbsp; padding: 10px 20px;}.navbar a {&nbsp; display: inline-block;&nbsp; padding: 6px 12px;&nbsp; text-decoration: none;&nbsp; color: white;&nbsp; text-transform: uppercase;}链接到沙箱