React应用中基于路由路径的组件条件渲染指南

// Layout.js
import React from 'react';
import { useLocation } from 'react-router-dom';
import Navbar from './Navbar'; // 假设Navbar组件的路径
// import Hnavbar from './Hnavbar'; // 如果Hnavbar也需要条件渲染，可以放在这里

const Layout = ({ children }) => {
  const location = useLocation();

  // 判断当前路径是否为需要隐藏Navbar的认证页面
  const isAuthPage = location.pathname === "/signin" || location.pathname === "/signup";

  return (
    <>
      {/* 根据isAuthPage的值条件渲染Navbar */}
      {!isAuthPage && <Navbar />}

      {/* 如果Hnavbar也需要根据路由条件渲染，可以在这里添加逻辑 */}
      {/* <Hnavbar /> */}

      {/* 渲染Layout组件的子组件，即具体的页面内容 */}
      {children}
    </>
  );
};

export default Layout;

// App.js
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { UserProvider } from './UserContext'; // 假设UserProvider存在
import { ToastContainer } from 'react-toastify'; // 假设ToastContainer存在

// 导入自定义布局组件
import Layout from './Layout'; 

// 导入其他通用组件和页面组件
import Hnavbar from './Hnavbar'; // Hnavbar通常是全局的，可根据需求放置
import LandingPage from './LandingPage';
import Analytics from './Analytics';
import Home from './Home';
import SignUp from './SignUp';
import SignIn from './SignIn';
import Hospitals from './Hospitals';
import Subscribe from './Subscribe';

function App() {
  return (
    <BrowserRouter>
      <UserProvider>
        <div className="App">
          {/* Hnavbar 如果是全局且不需要根据路由条件渲染，可以放在Layout外部 */}
          <Hnavbar /> 

          {/* 将需要条件渲染Navbar的路由页面包裹在Layout组件中 */}
          <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>
          </Layout>

          <ToastContainer theme="light" />
        </div>
      </UserProvider>
    </BrowserRouter>
  );
}

export default App;