使用React Router V4隱藏Navbar

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語句時可以解決此問題，但是在路線'/'上仍顯示導航欄

導航欄顯示在登錄頁面上方

任何幫助，將不勝感激！

Answer 1

我認為不是const currentRoutes = this.props.location; 您需要類似const currentRoute = this.props.location.pathname 。

this.props.location是一個Object，因此您的條件永遠不會為true 。

Answer 2

掛載您的App組件后， componentDidMount只會被調用一次。

您可以改為在componentDidMount偵聽history中的更改，如果pathname是/或/Register ，則更改isNavbarHidden 。

例

class App extends Component {
  constructor(props) {
    super(props);
    const { pathname } = this.props.location;
    this.state = {
      isNavbarHidden: pathname === "/" || pathname === "/Register"
    };
  }

  componentDidMount() {
    this.unlisten = this.props.history.listen(location => {
      const { pathname } = location;
      const isNavbarHidden = pathname === "/" || pathname === "/Register";

      this.setState({ isNavbarHidden });
    });
  }

  componentWillUnmount() {
    this.unlisten();
  }

  render() {
    const { isNavbarHidden } = this.state;

    return (
      <div>
        {!isNavbarHidden && <Navigation />}
        <Link to="/">Login</Link>
        <Link to="/Register">Register</Link>
        <Link to="/Home">Home</Link>
        <Link to="/Dashboard">Dashboard</Link>
        <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>
    );
  }
}

ReactDOM.render(
  <BrowserRouter>
    <Route path="/" component={App} />
  </BrowserRouter>,
  document.getElementById("root")
);