时间戳

首页 > 解决方案 > 如何在反应中从某些页面中删除导航栏

javascript - 如何在反应中从某些页面中删除导航栏

问题描述

我正在建立一个网站，我不想在 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} /> and 中删除导航栏<Route component={Error} />。请帮忙。

标签： javascriptreactjs

解决方案

<Navbar />需要检查 window.location 并渲染为空

见https://reactrouter.com/web/api/Hooks/uselocation

或者创建一个新组件来进行检查并将其呈现为子组件

<MayRenderNav><Navbar /></MayRenderNav>

推荐阅读