ReactJS如何实现Navbar不在登录注册等指定组件页面渲染

你现有代码的路由是拆分编写的，Nav直接放在App组件根节点，所有访问路径都会渲染Nav，可通过以下两种方法修改：

方案1：路径判断法（改造成本最低，适配现有代码逻辑） #

第一步：调整Index.js路由结构 #

把所有路由统一放在Router下，避免逻辑拆分：

import { BrowserRouter as Router } from 'react-router-dom';
import App from './App';

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById("root")
);

第二步：修改App.js，通过路径控制Nav显隐 #

使用react-router-dom提供的useLocation钩子获取当前访问路径，匹配到认证页面路径时不渲染Nav：

import { Route, useLocation } from 'react-router-dom';
import Nav from './Nav';
// 导入所有页面组件
import Home from './Home';
import About from './About';
import FAQs from './FAQs';
import Grow from './Grow';
import Register from './Register';
import Login from './Login';

function App() {
  const currentPath = useLocation().pathname;
  // 配置不需要显示导航的页面路径
  const authPaths = ['/login', '/register'];
  const shouldShowNav = !authPaths.includes(currentPath);

  return (
    <>
      {/* 仅非认证页面渲染导航 */}
      {shouldShowNav && <Nav />}
      {/* 所有页面路由统一配置 */}
      <Route exact path="/" component={Home} />
      <Route exact path="/about" component={About} />
      <Route exact path="/faq" component={FAQs} />
      <Route exact path="/grow" component={Grow} />
      <Route exact path="/register" component={Register} />
      <Route exact path="/login" component={Login} />
    </>
  );
}

export default App;

方案2：嵌套路由法（更易维护，适合项目迭代扩展） #

将需要显示导航的页面归到同一个父路由下，导航作为父路由的公共组件，认证页单独作为平级路由处理：

// App.js （react-router-dom v5版本写法）
import { Route, Switch } from 'react-router-dom';
import Nav from './Nav';
import Home from './Home';
import About from './About';
import FAQs from './FAQs';
import Grow from './Grow';
import Register from './Register';
import Login from './Login';

// 带导航的父路由组件
function LayoutWithNav() {
  return (
    <>
      <Nav />
      <Switch>
        <Route exact path="/" component={Home} />
        <Route exact path="/about" component={About} />
        <Route exact path="/faq" component={FAQs} />
        <Route exact path="/grow" component={Grow} />
      </Switch>
    </>
  )
}

function App() {
  return (
    <Switch>
      {/* 认证页面路由，无导航 */}
      <Route exact path="/register" component={Register} />
      <Route exact path="/login" component={Login} />
      {/* 其余页面走带导航的布局 */}
      <Route path="/" component={LayoutWithNav} />
    </Switch>
  );
}

export default App;

如果你使用的是react-router-dom v6版本，嵌套路由写法如下： #

// App.js v6版本
import { Routes, Route, Outlet } from 'react-router-dom';
import Nav from './Nav';
import Home from './Home';
import About from './About';
import FAQs from './FAQs';
import Grow from './Grow';
import Register from './Register';
import Login from './Login';

function LayoutWithNav() {
  return (
    <>
      <Nav />
      <Outlet /> {/* v6 用于渲染子路由内容 */}
    </>
  )
}

function App() {
  return (
    <Routes>
      <Route path="/login" element={<Login />} />
      <Route path="/register" element={<Register />} />
      <Route element={<LayoutWithNav />}>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/faq" element={<FAQs />} />
        <Route path="/grow" element={<Grow />} />
      </Route>
    </Routes>
  );
}

export default App;

内容的提问来源于stack exchange，提问作者Oluwaferanmi Ajiboye