React App.js实现Navbar条件渲染：解决useLocation上下文报错

你遇到的错误核心原因是：useLocation()钩子必须在<BrowserRouter>（或其他Router组件）的内部上下文中调用，但你当前的代码里，useLocation()是在App组件顶层执行的，而<BrowserRouter>是在App的return语句里才渲染的——此时调用useLocation()时还没有Router上下文，因此触发报错。

下面提供两种可行的解决方案：

方案一：将BrowserRouter移到App组件外部 #

把<BrowserRouter>的渲染逻辑放到项目入口文件index.js中，让整个App组件都处于Router上下文覆盖范围内，这样就能在App顶层正常使用useLocation()。

修改index.js： #

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

修改App.js： #

import { useLocation, Routes, Route } from 'react-router-dom';
// 导入你的其他依赖组件：UserProvider, Navbar, Hnavbar等

function App() {
  const location = useLocation();
  const isAuthPage = location.pathname === "/signin" || location.pathname === "/signup";

  return (
    <UserProvider>
      <div className="App">
        {!isAuthPage && <Navbar />}
        <Hnavbar />
        <Routes>
          <Route path="/" element={<LandingPage />} />
          <Route path="/analytics" element={<Analytics />} />
          <Route path="/home" element={<Home />} />
          <Route path="/signup" element={<SignUp />} />
          <Route path="/signin" element={<SignIn />} />
          <Route path="/nearby-hospitals" element={<Hospitals />} />
          <Route path="/subscribe" element={<Subscribe />} />
        </Routes>
        <ToastContainer theme="light" />
      </div>
    </UserProvider>
  );
}

export default App;

方案二：创建内部Layout组件封装导航逻辑 #

如果不想改动入口文件，可以创建一个专门的Layout组件，把需要使用useLocation()的导航条件渲染逻辑放到这个组件里，确保它在<BrowserRouter>内部渲染。

创建Layout.jsx： #

import { useLocation } from 'react-router-dom';
import Navbar from './Navbar';
import Hnavbar from './Hnavbar';

export default function Layout({ children }) {
  const location = useLocation();
  const isAuthPage = location.pathname === "/signin" || location.pathname === "/signup";

  return (
    <>
      {!isAuthPage && <Navbar />}
      <Hnavbar />
      {children}
    </>
  );
}

修改App.js： #

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Layout from './Layout';
// 导入你的其他依赖组件：UserProvider, LandingPage, Analytics等

function App() {
  return (
    <UserProvider>
      <BrowserRouter>
        <div className="App">
          <Layout>
            <Routes>
              <Route path="/" element={<LandingPage />} />
              <Route path="/analytics" element={<Analytics />} />
              <Route path="/home" element={<Home />} />
              <Route path="/signup" element={<SignUp />} />
              <Route path="/signin" element={<SignIn />} />
              <Route path="/nearby-hospitals" element={<Hospitals />} />
              <Route path="/subscribe" element={<Subscribe />} />
            </Routes>
            <ToastContainer theme="light" />
          </Layout>
        </div>
      </BrowserRouter>
    </UserProvider>
  );
}

export default App;

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