React Router V4 特定路由隐藏导航栏问题求助

嘿，我之前在React Router v4里也折腾过类似的需求——在登录页隐藏导航栏，试了几种方法后，这两种是最稳定好用的，给你详细说说：

这种方法是让导航栏自己判断当前路由，决定是否显示。核心是用withRouter高阶组件把导航栏包裹起来，这样它就能拿到路由的location对象。

import { withRouter, Link } from 'react-router-dom';

const Navbar = ({ location }) => {
  // 定义需要隐藏导航栏的页面路径
  const hiddenPages = ['/login', '/register'];
  
  // 如果当前路径在隐藏列表里，直接返回null，不渲染导航栏
  if (hiddenPages.includes(location.pathname)) {
    return null;
  }

  // 正常渲染导航栏内容
  return (
    <nav className="navbar">
      <Link to="/">首页</Link>
      <Link to="/dashboard">控制台</Link>
      <Link to="/profile">个人中心</Link>
    </nav>
  );
};

// 用withRouter包裹后，Navbar才能拿到location props
export default withRouter(Navbar);

这个方法的好处是导航栏的逻辑自包含，不用改动路由结构，适合页面不多的场景。

如果你的页面比较多，或者想把“是否显示导航栏”的逻辑集中在路由配置里，可以试试这种方式：把需要导航栏的页面和不需要的页面分开路由，只在前者里渲染导航栏。

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Navbar from './Navbar';
import Login from './Login';
import Home from './Home';
import Dashboard from './Dashboard';
import Register from './Register';

const App = () => {
  return (
    <Router>
      <Switch>
        {/* 不需要导航栏的页面，直接单独配置路由 */}
        <Route exact path="/login" component={Login} />
        <Route exact path="/register" component={Register} />

        {/* 所有需要导航栏的页面，统一嵌套在这个路由里 */}
        <Route path="/" render={() => (
          <>
            <Navbar />
            <Switch>
              <Route exact path="/" component={Home} />
              <Route path="/dashboard" component={Dashboard} />
            </Switch>
          </>
        )} />
      </Switch>
    </Router>
  );
};

export default App;

这种方式逻辑更清晰，新增需要隐藏导航栏的页面时，直接在上面加新的Route就行，不用动导航栏的代码。

如果你的React Router v4版本是4.3.0及以上，也可以用useLocation钩子替代withRouter，写法更简洁（函数组件专属）：

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

const Navbar = () => {
  const location = useLocation();
  if (location.pathname === '/login') return null;

  return (
    <nav className="navbar">
      {/* 导航内容 */}
    </nav>
  );
};

export default Navbar;

记得检查一下你的依赖版本，确保支持hooks哦。

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