Question

我正在构建一个简单的前端应用程序，并且正在使用React Router V4，我试图在Login和Register屏幕上隐藏导航栏。

这是我的App.js代码

class App extends Component {
  constructor() {
    super();
    this.state = {
      isNavbarHidden: false
    };
  }
  componentDidMount() {
    const currentRoutes = this.props.location;
    if (currentRoutes === "/") {
      this.setState({ isNavbarHidden: true });
    }
  } // end of componentDidMount
  render() {
    const { isNavbarHidden } = this.state;
    console.log(isNavbarHidden);
    return (
      <div>
        {!isNavbarHidden && <Navigation />}
        <div className="sans-serif">
          <Route exact path="/" component={Login} />
          <Route exact path="/Register" component={Register} />
          <Route exact path="/Home" component={Home} />
          <Route exact path="/Dashboard" component={Dashboard} />
        </div>
      </div>
    );
  }
}

export default App;

我在index.js

中有这个

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>, 
  document.getElementById('root')
);

我认为当我在componentDidMount中执行if语句时可以解决该问题，但是在路线'/'上仍显示导航栏

NavBar shown above login page

任何帮助将不胜感激！

Answer 1

我认为您想要的不是const currentRoutes = this.props.location;，而是const currentRoute = this.props.location.pathname。

this.props.location是一个对象，因此您的条件永远不会是true。

Answer 2

componentDidMount仅在安装App组件时被调用一次。

您可以改为收听{{1}中history中的更改，如果componentDidMount是isNavbarHidden或pathname，请更改/。

示例

/Register

使用React Router V4隐藏Navbar

2 个答案: