如何在react导航v5中处理底部选项卡栏的可见性？

npm install react-router-dom

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

const BottomTabBar = () => {
  const location = useLocation();

  // 根据当前路径判断是否显示底部选项卡栏
  const isVisible = location.pathname !== '/login';

  return (
    <div style={{ display: isVisible ? 'block' : 'none' }}>
      {/* 底部选项卡栏的内容 */}
    </div>
  );
};

export default BottomTabBar;

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import BottomTabBar from './BottomTabBar';

const App = () => {
  return (
    <Router>
      <Switch>
        {/* 其他路由和组件 */}
        <Route path="/" component={Home} />
      </Switch>
      <BottomTabBar />
    </Router>
  );
};

export default App;

import React from 'react';
import { Link } from 'react-router-dom';

const Home = () => {
  return (
    <div>
      {/* 页面内容 */}
      <Link to="/dashboard">Dashboard</Link>
      <Link to="/profile">Profile</Link>
    </div>
  );
};

export default Home;