时间戳

首页 > 解决方案 > 如何在某些路径上隐藏我的 NavigationBar 组件

javascript - 如何在某些路径上隐藏我的 NavigationBar 组件

问题描述

一直在寻找修复程序，似乎找不到在这里工作的东西，我尝试使用匹配标签将其与某个页面匹配，但它无法正常工作。在这里很迷失。

  return (
<React.Fragment>
  <Router>

    {/* <NavigationBar /> PLACE PREFERRED NAVIGATION IN LINE BELOW */}
    <NavigationBar />
 



    <AuthProvider>

      <Switch>

        <Route exact path="/" component={Login} />
        <Route exact path="/signup" component={Signup} />
        <PrivateRoute exact path="/home" component={Home} />
        <PrivateRoute exact path="/map" component={MapPage} />
        <PrivateRoute exact path="/profile" component={Profile} />
        <PrivateRoute exact path="/feedback" component={Feedback} />
        <PrivateRoute exact path="/about" component={About} />
        <PrivateRoute exact path="/resources" component={Resources} />
        <PrivateRoute exact path="/academic" component={Academic} />
        <PrivateRoute exact path="/career" component={Career} />
        <PrivateRoute exact path="/financial" component={Financial} />
        <PrivateRoute exact path="/physical" component={Physical} />
        <PrivateRoute exact path="/psycho" component={Psycho} />
        <PrivateRoute exact path="/social" component={Social} />
        <PrivateRoute exact path="/spiritual" component={Spiritual} />
        <PrivateRoute exact path="/badges" component={Badges} />
        <Route exact path="/404" component={NotFoundPage} />
        <Route exact path="/underConstruction" component={pageUnderConstruction} />
        <Redirect to="/404" />


      </Switch>

    </AuthProvider>

  </Router>

</React.Fragment>

)

标签： javascriptreactjsreact-router

解决方案

更新

这是解决方案：

import { createBrowserHistory } from "history";

const history = createBrowserHistory()

{allowedRoutesNavbarToShow.includes(history.location.pathname) && (
    <Navbar />
)}

要更新浏览器历史记录，请执行以下步骤：

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

东西.js

export default function Something(props) {
  function handleClick() {
    props.history.push("/somewhere");
  }

  return (
      <button onClick={handleClick}>Go to Somewhere</button>
  );
}

访问以查看完整代码和实时工作解决方案： Codesandbox

快乐编码:)

推荐阅读