在 React 中的一条路线上显示导航组件

Posted 2023-02-23

【中文标题】在 React 中的一条路线上显示导航组件

【英文标题】：Reveal a navigation component on one route in React

【发布时间】：2017-04-21 10:48:11

【问题描述】：

我有一个顶部有导航的应用程序（主页、关于、常见问题）。只有在 HOME 路线上，我需要隐藏菜单然后显示 onscroll。导航是在 App.jsx 中构建的，因此它出现在每个页面上。如何仅为这条特定路线启用显示？

我的显示组件

   import React,  Component  from 'react';

class NavScroll extends React.Component 
    constructor(props)
      super(props);
      this.state=isHide:false;
      this.hideBar = this.hideBar.bind(this)
    
    hideBar()
       let isHide = this.state
       window.scrollY > this.prev?
       !isHide && this.setState(isHide:true)
       :
       isHide && this.setState(isHide:false)

       this.prev = window.scrollY;
    
    componentDidMount()
        window.addEventListener('scroll',this.hideBar);
    
    componentWillUnmount()
         window.removeEventListener('scroll',this.hideBar);
    
    render()

        let classHide=this.state.isHide?"hide":""
        return <div className="fixed "+classHide>
        </div>;
    


export default NavScroll;

App.jsx

import React,  Component  from 'react';
import NavLink from './global/NavLink.jsx';
import Footer from './global/Footer.jsx';
import NavScroll from './global/NavScroll.jsx';


var App = React.createClass(



  render: function()

    return (
      <div>
         <div>
          <NavLink to="/"><img className="logo" ></img></NavLink>
          <NavLink to="/about" className="navMenuButton">ABOUT</NavLink>
          <NavLink to="/faq" className="navMenuButton">FAQ</NavLink>
        </div>

         this.props.children 

        <Footer />

      </div>
    );
  
);



export default App;

【参考方案1】：

您需要检查当前location 的pathname。 location 是为匹配路由渲染的组件的 injected prop。

class App extends React.Component 

  render() 
    const  location  = this.props

    return (
      <div>
         location.pathname === '/' ? <HomeNavigation /> : <OtherNavigation /> 
      </div>
    )
  

【讨论】：

谢谢！我必须更具体，改用 this.props.location，所以它是： const location = this.props.location;

const location = this.props 与const location = this.props.location 相同，只是使用了解构赋值。 developer.mozilla.org/en-US/docs/Web/javascript/Reference/… 并不是只需要一个变量，但是当您想从同一个对象中解构多个变量时，它会派上用场。

另外，如果这解决了您的问题，您可以将其标记为正确答案。