React Router下导航栏隐藏问题：注册页不显示导航栏的实现困惑

我懂你的需求——要在注册页面（/signup）完全隐藏导航栏，只在用户登录后的路由（比如根路由/）才展示它。现在你的导航栏是直接渲染在所有路由的外层容器里，所以每个页面都会默认显示它，咱们可以通过根据当前路由动态控制导航栏的渲染来解决这个问题。

方法一：针对类组件的解决方案（适配你的现有代码） #

你的代码看起来是类组件结构，咱们可以用React Router的withRouter高阶组件来注入路由相关的属性，然后判断当前路径：

1. 先导入withRouter：

import { BrowserRouter, Route, NavLink, withRouter } from 'react-router-dom';

2. 修改组件逻辑，用withRouter包裹组件以获取location属性，再通过路径判断是否渲染导航栏：

class YourComponent extends React.Component {
  render() {
    const { location } = this.props;
    // 仅当当前路由不是/signup时，才渲染导航栏
    const shouldShowNavbar = location.pathname !== '/signup';

    return (
      <App>
        <Main>
          <BrowserRouter>
            <div>
              {/* 条件渲染导航栏 */}
              {shouldShowNavbar && (
                <nav className="navbar navbar-expand-lg navbar-light bg-light">
                  <ul className="navbar-nav">
                    <li className="nav-item">
                      <NavLink to={"/"} className="nav-link">Log In</NavLink>
                    </li>
                    <li className="nav-item">
                      <NavLink to={"/home"} className="nav-link">Home</NavLink>
                    </li>
                    <li className="nav-item">
                      <NavLink to={"/"} className="nav-link">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>
    );
  }
}

// 用withRouter包裹组件，注入路由属性
export default withRouter(YourComponent);

方法二：函数组件的简洁方案（如果后续重构代码） #

如果之后你把组件改成函数式写法，用useLocation钩子会更清爽：

import { useLocation } from 'react-router-dom';

function YourComponent() {
  const location = useLocation();
  const shouldShowNavbar = location.pathname !== '/signup';

  return (
    // ... 其他页面结构
    {shouldShowNavbar && <nav className="navbar navbar-expand-lg navbar-light bg-light">...</nav>}
    // ... 路由内容
  );
}

补充：结合登录状态的严谨控制 #

如果你的真实需求是只有用户登录成功后才显示导航栏（而不只是路由匹配），那最好结合登录状态（比如从Context、Redux或者本地存储中获取）来判断：

// 假设你有一个isLoggedIn的状态变量
const shouldShowNavbar = location.pathname !== '/signup' && isLoggedIn;

这样既能保证注册页面隐藏导航栏，也能确保未登录时其他页面也不会展示导航栏，更贴合实际业务逻辑。

内容的提问来源于stack exchange，提问作者torylor