如何在 URL 更改时隐藏导航栏项目？

Posted 2023-02-21

【中文标题】如何在 URL 更改时隐藏导航栏项目？

【英文标题】：How to Hide Navbar items on URL Change?

【发布时间】：2019-01-26 10:23:02

【问题描述】：

我有一个名为 Header 的导航栏组件，它在我的网络应用程序的几乎每个页面上都被调用，现在我希望某些导航栏项目在打开某些页面时消失，例如我希望导航项目在 http://localhost:3000/stories 上消失但必须显示在http://localhost:3000/，我附上了图片。 例如，我想要“什么是价值”和“价值如何运作？”在/故事页面上消失 我在这些项目上写了一个设置状态函数，但是当我点击故事导航项目时它们第二次起作用。

operation()

  this.setState(showme:false)


 <Navbar className="fixed-top navbar-custom" color="white" light expand="lg">
        <Container>
          <NavbarBrand tag=Link to='/'>
            <img src=logo  className="logo" />
          </NavbarBrand>

          <NavbarToggler onClick=this.toggle />

          <Collapse isOpen=this.state.isOpen navbar>
           this.state.showme?
            <Nav className="mr-auto" navbar style=cursor:'pointer'>
              <NavItem>
              <NavLink onClick=this.scrollToTop className = "navlink-custom">What is Valu?</NavLink>
                </NavItem> 
              <NavItem>
                <NavLink onClick=this.scrollTo className = "navlink-custom">How Valu work ?</NavLink>
              </NavItem>
            </Nav>
            :null
          


            <Nav className="ml-auto" navbar  >
              <NavItem>
                <NavLink onClick=this.operation  tag=Link to='/stories' className = "navlink-custom">Stories</NavLink>
              </NavItem>
              <NavItem >
                <NavLink  tag=Link to='/aboutus' className = "navlink-custom" Link to="/aboutus">About us</NavLink>
              </NavItem>
              <NavItem>
              <Link to="/signup">
                <button className="btn-login">
                  <div className="login">Register/login</div>
                </button>' '
                </Link>
              </NavItem>
            </Nav>
          </Collapse>
        </Container>
      </Navbar>

Routes.js 在路线中：

    const AppRouter = () =>
     
    return ( 
    <Router> 
    <Switch> 
    <Route exact path='/' component=App/> 
    <Route path='/howvaluworks' component=HowValuWorks /> 
    <Route path='/Footer' component=footer /> 
    <Route path='/aboutus' component=AboutUs /> 
    <Route path='/login' component=loginform/> 
    <Route path='/signup' component=signupform/>
    <Route path='/signup' component=signupform/> 
    <Route path='/profile-tutorial' component=profiletutorial/> 
    <Route path='/profile-account' component=profileaccount/> 
    <Route path='/stories' component=stories/> 
    <Route path='/profilelaunch' component=profilelaunch/> 
  );

【问题讨论】：

我已经更新了我的答案

它的工作现在非常感谢你，我用这个链接来获取路由***.com/a/51389622/10248999

【参考方案1】：

根据componentWillReceiveProps中的路由位置设置条件。

constructor(props)
 super(props);
  this.state =  
    hideValu : 1
  ;
 this.changeNavItem = this.changeNavItem.bind(this);


componentDidMount()
 this.changeNavItem(this.props.location.pathname);


componentWillReceiveProps(nextProps)
 if(this.props.location.pathname !== nextProps.location.pathname)
   this.changeNavItem(nextProps.location.pathname); 
  


changeNavItem(currentRoute)
  if(currentRoute == "\stories")
       this.setState(
          hideValu : 0
       );
    

在导航栏中，

 this.state.showme? <Nav className="mr-auto" navbar style=cursor:'pointer'>
        this.state.hideValu && <div>
          <NavItem>
             <NavLink onClick=this.scrollToTop className = "navlink-custom">What is 
             Valu?</NavLink>
          </NavItem> 
          <NavItem>
            <NavLink onClick=this.scrollTo className = "navlink-custom">How Valu 
            work ?
            </NavLink>
          </NavItem>
        </div>
        </Nav>
        :null
      

更新

使用名为 MainLayout 的组件包装您的路线，您可以在其中定义您的 header 和 footer 组件。这样您的 props.location 值就会得到更新并且您可以访问它。

  <Router>
        <Switch>
         <MainLayout>
            <Route exact path='/' component=App/>
            <Route path='/howvaluworks' component=HowValuWorks />
            <Route path='/Footer' component=footer />
            <Route path='/aboutus' component=AboutUs />
            <Route path='/login' component=loginform/>
            <Route path='/signup' component=signupform/>
            <Route path='/profile-tutorial' component=profiletutorial/>
            <Route path='/profile-account' component=profileaccount/>
            <Route path='/stories' component=stories/>
            <Route path='/profilelaunch' component=profilelaunch/>
            <Route path='/draft' component=draft/>
            <Route path='/dashboard' component=dashboard/>
            <Route path='/launchsurvey' component=launchsurvey/>
          </MainLayout>
        </Switch>
    </Router>

MainLayout.js

import React from "react"
import Header  from '../containers/Header';
import Footer from "./Footer"

class MainLayout extends React.Component
  render() 
      return(
         <div>
            <Header />
              <div className="appLayout">
                 this.props.children 
              </div>
            <Footer />
         </div>
      );
  


export default MainLayout

添加在头部组件中也添加navbar

【讨论】：

我已经添加了你的代码，但它说，“路径名”未定义，所以我必须在哪里初始化这个路径名，我是新来的，所以裸我，如果我在这种情况下是哑巴.

我正在使用 react-router-dom

react-router-dom: 4.2.2 这就是我正在使用的

好的，这很酷。请分享您的自定义 routes.js 来处理您的组件。

我在我的问题中添加了文件编码..!!

【参考方案2】：

如果您想要一个快速的解决方案。您可以只使用 window.location.pathname 来检查您的 url 并执行一些类似这样的条件

    this.state = 
  hideNavItems: false


componentDidMount() 
  if (window.location.pathname === '/stories') 
    this.setState(hideNavItems: true);
  


render() 
  return (
    <Navbar className="fixed-top navbar-custom" color="white" light expand="lg">
      <Container>
        <NavbarBrand tag=Link to='/'>
          <img src=logo  className="logo" />
        </NavbarBrand>

        <NavbarToggler onClick=this.toggle />

        <Collapse isOpen=this.state.isOpen navbar>
         !this.state.hideNavItems 
          ? (<span>
              <Nav className="mr-auto" navbar style=cursor:'pointer'>
                <NavItem>
                  <NavLink onClick=this.scrollToTop className = "navlink-custom">What is Valu?</NavLink>
                </NavItem> 
                <NavItem>
                  <NavLink onClick=this.scrollTo className = "navlink-custom">How Valu work ?</NavLink>
                </NavItem>
              </Nav>
            </span>)
          : null
        


          <Nav className="ml-auto" navbar  >
            <NavItem>
              <NavLink onClick=this.operation  tag=Link to='/stories' className = "navlink-custom">Stories</NavLink>
            </NavItem>
            <NavItem >
              <NavLink  tag=Link to='/aboutus' className = "navlink-custom" Link to="/aboutus">About us</NavLink>
            </NavItem>
            <NavItem>
            <Link to="/signup">
              <button className="btn-login">
                <div className="login">Register/login</div>
              </button>' '
              </Link>
            </NavItem>
          </Nav>
        </Collapse>
      </Container>
    </Navbar>
  )