React+TypeScript实现登录页不渲染Nav组件的方法求助

有两种常用方法可以实现这个需求，你可以根据自己的习惯选择：

方法一：利用useLocation钩子判断当前路由 #

通过react-router-dom提供的useLocation获取当前路径，再通过条件渲染控制Nav的显示：

import React from 'react';
import logo from './logo.svg';
import './App.css';
import {Login} from "./components/Login";
import {Nav} from "./components/Nav";
import {Home} from "./components/Home";
import {BrowserRouter, Routes, Route, useLocation} from "react-router-dom";

function App() {
  const location = useLocation();
  // 仅当当前路径不是/login时渲染Nav
  const shouldShowNav = location.pathname !== '/login';

  return (
    <BrowserRouter>
      {shouldShowNav && <Nav />}
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route path="/" element={<Home />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

方法二：使用嵌套路由结构 #

把需要显示Nav的页面统一放到带Nav的布局组件下，Login页面单独路由，这种方式更适合后续扩展：

import React from 'react';
import logo from './logo.svg';
import './App.css';
import {Login} from "./components/Login";
import {Nav} from "./components/Nav";
import {Home} from "./components/Home";
import {BrowserRouter, Routes, Route, Outlet} from "react-router-dom";

// 定义带Nav的通用布局组件
const LayoutWithNav = () => (
  <>
    <Nav />
    <Outlet /> {/* Outlet用来渲染子路由的页面内容 */}
  </>
);

function App() {
  return (
    <BrowserRouter>
      <Routes>
        {/* 不需要Nav的Login页面单独配置 */}
        <Route path="/login" element={<Login />} />
        {/* 所有需要Nav的页面都嵌套在LayoutWithNav下 */}
        <Route element={<LayoutWithNav />}>
          <Route path="/" element={<Home />} />
          {/* 后续新增的需要Nav的页面都可以添加在这里 */}
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

两种方法对比：

• 方法一适合页面数量少的场景，简单直接；
• 方法二更适合项目后续会新增大量页面的情况，路由结构更清晰，扩展性更强。

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