reactjs - 隐藏导航栏功能不起作用 useLocation

Question

谁能告诉我为什么这个函数没有给我想要的结果。我错过了一些明显的事情吗？当我控制台日志时

import React from 'react'
import Navbar from './Components/Navbar'
import {BrowserRouter as Router, Route} from 'react-router-dom';
import Home from './Components/Home'
import Welcome from './Components/Welcome'
import About from './Components/About'
import Contact from './Components/Contact'


    function App() {
  return (
    <>
    <useLocation> 
      {({ useLocation }) => { 
        if (useLocation.pathname !== "/") { return <Navbar/>; } }
      } 
    </useLocation>
    <Router>
      <Route exact path="/" component={Welcome}/>
      <Route path="/Home" component={Home}/>
      <Route path="/About" component={About}/>
      <Route path='/Whitepaper' component={WhitePaper}/>
    </Router>
    </>
  );
}

export default App;

Answer 1

我认为您会更好地将 Navbar 组件渲染到 route 并检查 route props 传递的 location .

react-router-dom@5

function App() {
  return (
    <Router>
      <Route
        render={({ location }) => location.pathname !== "/" ? <Navbar /> : null}
      />
      <Route exact path="/" component={Welcome} />
      <Route path="/Home" component={Home} />
      <Route path="/About" component={About} />
      <Route path='/Whitepaper' component={WhitePaper} />
    </Router>
  );
}

react-router-dom@6

如果使用react-router-dom@6，那么您可以创建一个布局路由来渲染NavBar组件和一个用于嵌套的Outlet路线。

示例:

import {
  BrowserRouter as Router,
  Routes,
  Route,
  Outlet,
} from 'react-router-dom';

const NavLayout = () => (
  <>
    <Navbar />
    <Outlet />
  </>
);

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Welcome />} />
        <Route element={<NavLayout />}>
          <Route path="/Home" element={<Home />} />
          <Route path="/About" element={<About />} />
          <Route path='/Whitepaper' element={<WhitePaper />} />
        </Route>
      </Routes>
    </Router>
  );
}