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

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 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

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 = () => {

  return (

    <div className="navbar">

      <Link to="/">Home</Link>

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

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

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

    </div>

  );

};

const Home = () => (

  <div>

    <h1>This is home</h1>

    <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>

      <Link to="/">Back to home</Link>

    </div>

  );

};

export default function App() {

  return (

    <Router>

      <Route

        render={({ location }) => {

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

        }}

      />

      <Switch>

        <Route path="/" exact component={Home} />

        <Route path="/about" component={About} />

        <Route path="/contact" component={Contact} />

        <Route component={Error} />

      </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;

}

链接到沙箱