bugfix> javascript > 投稿

サインアップページにいるときにnavbarを無効にすることができません。ユーザーがルート「/」のログインを完了した後にのみnavbarを表示したいのです。どんな助けでも大歓迎です。

 render() {
    return (
        <App>
          <Main>
            <BrowserRouter>
                <div>
                    <nav className="navbar navbar-expand-lg navbar-light bg-light">
                        <ul className="navbar-nav">
                            <li className="nav-item">
                                <NavLink to={"/"} className="nav-link" href="#">Log In</NavLink>
                            </li>
                            <li className="nav-item">
                                <NavLink to={"/home"} className="nav-link" href="#">Home</NavLink>
                            </li>
                            <li className="nav-item">
                                <NavLink to={"/"} className="nav-link" href="#">Log Out</NavLink>
                            </li>
                        </ul>
                    </nav>
                    <div className="content">
                        <Route exact path="/" render={() => <Splash />} />
                        <Route exact path="/main" render={() => <Main />} />
                        <Route exact path="/signup" render={() => <Signup />} />
        
                    </div>
                </div>
            </BrowserRouter>
          </Main>
        </App>
    );
}

回答 1 件
  • this.props.location.pathname を使用して、現在のルートを検出できます 。

    次に設定 {this.props.location.pathname !== '/signup' && <nav> ... </nav>}  ビュー条件が満たされた場合にのみナビゲーションを表示することを意味します。ビュー条件ロジックの詳細については、こちらをご覧ください

    アプリがより複雑になった場合。 https://reacttraining.com/react-router/web/example/auth-workflowに従ってPrivateRouteをセットアップできます これは、ユーザーがログインしているかどうかに関係なく、純粋に異なるルートを処理できることを意味します。

あなたの答え